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

Question

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

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

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

Answer 1

Chrome开发者工具在Elements＆gt;中有一个内置的：悬停状态选择器。样式面板。您也可以在那里切换其他伪类（如：active）。

Answer 2

用于测试:hover

中的Chrome州

在:hover中测试Firefox州（您需要firebug添加）

Answer 3

这是firebug＆amp; amp;屏幕截图。那些不够敏锐的人看不到agriboz的评论（像我一样）

Answer 4

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

要查看以下规则：将鼠标悬停在“样式”窗格中，请单击右上角的小虚线框按钮。

要强制元素进入：悬停状态，请右键单击该元素。

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