logo标签列表

在Firebug或Chrome DevTools中检查悬停状态

htmlfirebuggoogle-chrome-devtools
11

我有一个带有CSS悬停状态的HTML元素。在鼠标悬停时，发现margin或padding存在缺陷，每次悬停时元素的内容都会滑动一点，这很烦人。

我想使用FireBug或Chrome Dev Tools进行调试，但我常遇到的问题是，在从Firebug/devtools选择元素后，我需要将鼠标移回devtools，此时悬停状态不再有效。

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

2
对于Firebug的悬停和活动状态 - agriboz
4个回答
10

Chrome Dev Tools内置了一个:hover状态选择器，位于元素 > 样式面板中。您还可以在那里切换其他伪类（如:active）。

在Firefox中，如果你想调试DOM而不是CSS，你需要： 1）按F12打开检查器 2）选择调试器选项卡 3）将鼠标悬停在要检查的元素上，同时处于:hover状态 4）按F8暂停调试器 5）选择DOM检查器选项卡 在暂停模式下，所有东西都会停止，包括JS、DOM刷新、CSS状态，但不包括CSS动画。 最重要的是在按下F8时要在调试器选项卡中。 - Kir Kanos
6
5
这里有一张 Firebug 的截图，如果你看 agriboz 的评论不够清晰（就像我一样）。enter image description here
0

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

要查看像:hover这样的规则，请单击顶部右侧的小点框按钮中的样式窗格。

要将元素强制转换为:hover状态，请右键单击该元素。

或者，您可以在脚本面板中使用事件监听器断点侧边栏窗格，并选择在mouseover处理程序中暂停。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接