如何在 Chrome DevTools 中檢查 :hover 樣式？

在Chrome 開發者工具中檢查:hover 樣式

在Chrome 中檢查元素的樣式時，您可能想要查看應用的樣式當元素處於:hover 狀態時。 Firebug 提供了一個方便的下拉式選單來選擇元素狀態，而 Chrome 的開發者工具似乎缺乏此功能。

尋找藏身處

不用擔心！ Chrome 開發者工具確實允許您檢查 :hover 樣式。

要存取這些樣式，請導覽至 Chrome 開發者工具中的「元素」面板，然後按一下右上角顯示的小「:hov」文字樣式窗格的。這將切換偽類規則的顯示，包括:hover。

強制懸停狀態

此外，您可以將元素強制進入:hover狀態以便於檢查。右鍵單擊該元素並從上下文選單中選擇“:hover”。這會將 :hover 樣式套用至元素，讓您可以觀察其效果。

其他資源

有關 Chrome 開發人員中的元素面板的更多見解工具，請參閱捷徑綜合指南。

以上是如何在 Chrome DevTools 中檢查 :hover 樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！