如何在 Chrome 開發工具中凍結 :hover 狀態，方便定義css樣式

　　現在在製作網頁時，雖然多以手機優先（mobile first）為設計原則，但桌機版的頁面依然不可忽略。為了提升互動體驗，在桌機模式下，我們經常會運用 hover 滑入事件，像是滑入變色、滑入展開選單、滑入出現輪播箭頭……這些都是常見又實用的應用。

不過最麻煩的地方在於，當需要進一步調整樣式時，往往得邊修改 CSS、邊用滑鼠滑入觸發效果來預覽，來回操作相當耗時又不方便。因此今天梅干要來分享一個實用小技巧：如何在 Chrome 瀏覽器中「凍結 hover 狀態」，讓你能輕鬆預覽並設定 hover 狀態下的 CSS 樣式！

---

Step1
首先先開啟開發人員工具，再將頁籤切到Sources。

---

Step2
接著再將滑鼠，滑入要顯示的區域範圍後，按下 command + </font> 。

---

Step3
這時畫面就會被凍結下來。

---

Step4
這時再切到選取工具，就可選取區塊進行CSS的樣式設定囉！這樣就可解決hover時的樣式設定啦！