chrome谷歌開發者工具（hover時候的css樣式怎麼在瀏覽器調試）

　　

　　不少小夥伴在開發的時候，大可能是在用谷歌開發者工具調試代碼（快捷鍵F12 或 Ctrl-Shift-i）。

　　可能會常常遇到須要調試hover樣式的時候，通常都是直接改代碼，而後在頁面上刷新查看效果。

　　其實，這裏有個小技巧，用谷歌開發者工具就能夠方便的查看hover樣式

 

　　方法一（鼠標右鍵想查看hover樣式的元素，選擇檢查或審查元素。這樣就能在截圖右邊看到hover效果的樣式代碼）

　　注：這裏鼠標右鍵選擇檢查或審查元素後必定不要把鼠標移到開發者工具外，

　　　　要始終在開發者工具內。否則沒法看到hover樣式。

　　　　這時候開發者工具的顯示方式建議爲截圖中的向下顯示，

　　　　而且讓開發者工具儘可能靠近要審查的元素，這樣鼠標纔不容易離開開發者工具

 

　　

　　方法二（推薦）

　　　　點擊開發者工具右邊:hov選項之後，會出現紅色框的內容，而後把:hover選項勾上，這樣就能看到審查元素的hover樣式代碼）

　　注：在開發者工具Elements面板找到該元素,右鍵該元素選擇Force-state選項裏面的hover選項，

　　　　也能查看hover樣式代碼。效果同方法二，此時該元素前面會有一個橘黃色的小圓圈