如何在 Chrome DevTools 中检查 :hover 样式？

在 Chrome 开发者工具中检查 :hover 样式

在 Chrome 中检查元素的样式时，您可能想要查看应用的样式当元素处于 :hover 状态时。 Firebug 提供了一个方便的下拉菜单来选择元素状态，而 Chrome 的开发者工具似乎缺乏此功能。

寻找藏身处

不用担心！ Chrome 开发者工具确实允许您检查 :hover 样式。

要访问这些样式，请导航到 Chrome 开发者工具中的“元素”面板，然后单击右上角显示的小“:hov”文本样式窗格的。这将切换伪类规则的显示，包括:hover。

强制悬停状态

此外，您可以将元素强制进入:hover状态以便于检查。右键单击该元素并从上下文菜单中选择“:hover”。这会将 :hover 样式应用于元素，让您可以观察其效果。

其他资源

有关 Chrome 开发人员中的元素面板的更多见解工具，请参阅快捷方式综合指南。

以上是如何在 Chrome DevTools 中检查 :hover 样式？的详细内容。更多信息请关注PHP中文网其他相关文章！