10

我有一个具有 CSS 悬停状态的 HTML 元素。悬停时的边距或填充有一个错误，每次我将鼠标悬停时，元素的内容都会滑动一点，这很烦人。

我想使用 FireBug 或 Chrome 开发工具进行调试，但我在使用这些工具时遇到的一个常见问题是，在我从 Firebug/devtools 中选择元素后，我显然需要将鼠标移回开发工具并悬停状态不再启用。

如何在元素处于悬停状态时使用这些工具检查/调试 HTML 元素？

4

4 回答 4

10

Chrome 开发工具在 Elements > Styles 面板中有一个内置的 :hover 状态选择器。您也可以在那里切换其他伪类（如：active）。

于 2012-05-15T14:16:22.923 回答
6

用于测试： Chrome中的悬停状态

在此处输入图像描述

用于测试： Firefox中的悬停状态（您需要添加firebug）

在此处输入图像描述

于 2013-12-21T06:22:45.123 回答
5

这是萤火虫的屏幕截图和那些不够清晰，无法看到 agriboz 评论的屏幕截图（比如我）

在此处输入图像描述

于 2013-03-18T15:45:43.350 回答
0

现在您可以看到伪类样式规则并将它们强制用于元素。

要查看样式窗格中的 :hover 等规则，请单击右上角的小虚线框按钮。

要强制元素进入 :hover 状态，请右键单击该元素。

或者，您可以使用“脚本”面板中的“事件侦听器断点”侧边栏窗格并选择在鼠标悬停处理程序中暂停。

于 2015-04-17T09:05:31.880 回答