我经常发现自己想要调试 CSS 布局问题，这些问题涉及由 Javascript 引起的 DOM 更改，以响应悬停事件或由于 :hover 选择器而应用的不同 CSS 规则。
通常，我会使用 Firebug 来检查给我带来麻烦的元素，看看它的 CSS 属性是什么，以及这些属性来自哪里。但是，当涉及到悬停时，它就变得不可能了，因为一旦您将鼠标向下移动到 Firebug 面板，您感兴趣的元素就不再悬停，适用的 CSS 规则不同，并且（在这种情况下JS 悬停） DOM 已更改。
有什么方法可以“冻结” DOM 的状态和 :hover 的应用程序，以便在悬停事件期间检查 DOM？
当然，欢迎任何其他关于如何调试此类问题的想法。
您可以在 Firebug 中执行此操作，但它有点“错误”。如果您检查元素然后单击 html 选项卡，例如单击 DOM 选项卡，当您返回 html 选项卡时，右侧的“样式”css 选项卡将有一个箭头下拉选择器，您可以在其中选择:hover 该元素的活动状态。不得不切换标签才能显示它，但它对我有用。
检查链接时，Firebug 显示默认的 CSS 状态，即应用于 a:link 的样式。默认情况下，不显示 :hover 和 :active 样式。幸运的是，您可以通过单击样式并选择适当的选项来更改链接的状态：
将onmouseover函数处理程序添加到采用:hover. 在该函数中，调用console.info(element)您想了解的任何元素。
myHoverElement.onmouseover = function() {
console.info(document.getElementById("someotherelementofinterest"));
};
当您在 firebug 活动的情况下运行此操作时，该元素将可用于在 firebug 控制台中进行检查。
在 firebug 中，在 HTML 视图中，查看右侧面板并找到“样式”选项卡。单击向下箭头并选择:hover。
在 Firefox (v33.1.1) 中：
在 Chrome（版本 35）中：
一些 JavaScript 工具包（例如 Dojo）使用 CSS 类（例如 dijitButtonHover）而不是 :hover 来设置样式。
所以 Style 选项卡 :hover 技巧不起作用。
相反，您可以右键单击 HTML 选项卡中的节点（谁的 CSS 类更改），然后“属性更改中断”
对于 CSS 问题，我发现 Web 开发者插件非常宝贵：
http://chrispederick.com/work/web-developer/
加载它，然后您可以使用 2 个可能的工具。
从任何鼠标悬停元素上的文件继承 css，使用 shift-ctrl-y
计算的 css（包括应用的任何内联样式 = 不在 .css 文件中 - 或通过 jquery 等中的 .css 方法） - 按 shift-ctrl-f
后者还将返回应用于元素的所有类。
当然，它还有其他很棒的用途，例如出色的表单调试，包括编辑隐藏字段和 cookie（可用于渗透测试）
您还可以检查该元素，然后在样式选项卡上应该有一个小的下拉箭头。它将有“显示用户代理”、“扩展速记属性”之类的内容，然后应该还有 2 个（我猜你正在检查具有悬停状态的东西）:active并:hover选择:hover你应该是金色的。
在较新的 Firefox 版本（至少 v57 及更高版本）中，检查员的 UI 与发布其他答案时略有不同。要启用和冻结元素的:active//状态:hover，:focus请检查它（右键单击 -> 检查元素）并在检查器中单击：
结果：
来源（图像在 CC-BY-SA v2.5 下获得许可，Mozilla 贡献者）
我遇到了同样的问题，发现虽然我无法使用 Firebug 在 Firefox 中检查悬停对象，但 Safari 的 Web Inspector 会冻结当前状态并允许检查。要激活 Safari 的网络检查器，只需在终端中输入以下行并重新启动 Safari：
defaults write com.apple.Safari WebKitDeveloperExtras -bool true
在浏览器中激活悬停元素，然后右键单击并选择“检查元素”。该页面将冻结在其当前状态，让您可以检查转瞬即逝的对象，让您心满意足。
firebug 中没有完美的解决方案（鼠标悬停/悬停模拟效果）。
但是，有几种方法可以在 firebug 中编辑悬停状态：
添加一个:active状态，以及您的:hover
a:hover, a:active { ... }
如果您将鼠标放在元素上，拖动并释放，它仍然处于活动状态。
将:hover状态变成.hover类
您可以通过单击源文件（在 Firebug 的样式选项卡中）来编辑 CSS 规则
然后，当然，您.hover将从元素中添加（和删除）该类。
我经常制作一些备用的 CSS 或 Javascript 来“冻结”我的悬停事件；用 Firebug 把它调整到完美，然后把我的悬停放回原处。
是的，您可以在触发悬停状态时右键单击“检查元素”。这在 Firebug 和 WebKit 中对我有用。
我知道这篇文章有点老了，但对于那些在 Google 上找到它的人，我创建了一个跨浏览器工具，让您只需移动鼠标即可可视化您的 HTML/CSS 布局。您可以轻松查看处于悬停状态的元素。