如何在 Chrome DevTools 中查看和操作 :hover 样式？

在 Chrome 开发者工具中查看 :hover 状态

与 Firebug 不同，Firebug 提供了用于选择元素状态的专用样式下拉菜单，Chrome 开发者工具提供更微妙的方法：悬停

解决方案：

访问 :hover 规则并操作其状态：

1. 启用伪类显示: 单击“样式”窗格右上角的小“:hov”文本。这将在常规 CSS 规则旁边显示 :hover 规则。
2. 强制 :hover 状态： 右键单击​​“元素”面板中所需的元素，然后从上下文菜单中选择“:hover” 。这将强制元素进入悬停状态，允许您检查其应用的样式。

其他提示：

• 有关更多键盘快捷键和元素面板中的功能，请参阅 Chrome 开发者工具快捷方式文档。
• 作为替代方案，您可以使用 Chrome 扩展“切换元素状态”可快速切换不同元素状态。

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