很多小伙伴在開發的時候,大多是在用谷歌開發者工具調試代碼(快捷鍵F12 或 Ctrl-Shift-i)。
可能會經常遇到需要調試hover樣式的時候,一般都是直接改代碼,然后在頁面上刷新查看效果。
其實,這里有個小技巧,用谷歌開發者工具就可以方便的查看hover樣式
方法一(鼠標右鍵想查看hover樣式的元素,選擇檢查或審查元素。這樣就能在截圖右邊看到hover效果的樣式代碼)
注:這里鼠標右鍵選擇檢查或審查元素后一定不要把鼠標移到開發者工具外,
要始終在開發者工具內。不然無法看到hover樣式。
這時候開發者工具的顯示方式建議為截圖中的向下顯示,
並且讓開發者工具盡量靠近要審查的元素,這樣鼠標才不容易離開開發者工具
方法二(推薦)
點擊開發者工具右邊:hov選項以后,會出現紅色框的內容,然后把:hover選項勾上,這樣就能看到審查元素的hover樣式代碼)
注:在開發者工具Elements面板找到該元素,右鍵該元素選擇Force-state選項里面的hover選項,
也能查看hover樣式代碼。效果同方法二,此時該元素前面會有一個橘黃色的小圓圈