如何调试 CSS/Javascript 悬停问题

Question

我经常发现自己想要调试 CSS 布局问题，这些问题涉及 Javascript 响应悬停事件或由于 :hover 选择器而应用不同 CSS 规则而引起的 DOM 更改。

通常，我会使用 Firebug 检查给我带来麻烦的元素，看看它的 CSS 属性是什么，以及这些属性来自哪里。然而，当涉及到悬停时，这就变得不可能了，因为一旦你把鼠标移到 Firebug 面板上，你感兴趣的元素就不再悬停了，适用的 CSS 规则也不同了，并且（在这种情况下） JS 悬停）DOM 被更改。

有什么方法可以“冻结” DOM 的状态和 :hover 的应用程序，以便按原样检查 DOM 期间 悬停事件？

当然，关于如何调试此类问题的任何其他想法都是受欢迎的。

Answer 1

添加onmouseover函数处理器到正在服用:hover的元素。里面那个函数，调用你想知道哪个元素console.info(element)。

myHoverElement.onmouseover = function() {
    console.info(document.getElementById("someotherelementofinterest"));
};

在与萤火虫运行此活性，该元件将可在萤火控制台检查。

Answer 2

您可以在Firebug，但其有点“越野车”做到这一点。如果你检查的元素，然后单击关闭的HTML标签，给DOM选项，例如，当你回到HTML标签右边的“风格”的CSS标签将有一个箭头下拉选择，你可以选择：该元素的悬停状态是活跃的。吮吸必须切换标签来得到它显示，但它为我工作。

Answer 3

当检查链接，萤火虫显示默认CSS状态，即施加到样式：链接。默认情况下，：hover和：active样式不显示。幸运的是，你可以通过点击样式，并选择相应的选项更改链接的状态：

Answer 4

在萤火，而在HTML视图，展望右侧面板并找到“样式”选项卡。点击向下箭头和选择:hover。

Answer 5

在 Firefox (v33.1.1) 中：

• 检查元件 (Q)
• 在 DOM 视图中右键单击该元素
• 在上下文菜单底部选择 :hover、:active 或 :focus

Answer 6

一些JavaScript工具包，如道场使用CSS类如dijitButtonHover样式而不是：悬停

所以样式选项卡：悬停特技不起作用

相反，你可以用鼠标右键单击该节点（谁的CSS类更改）的HTML标签，“打破属性更改”

Answer 7

在 Chrome（版本 35）中：

• 检查元素
• 在元素查看器中右键单击该元素。
• 选择“强制元素状态”-> :active, :hover, :focus, :visited

Answer 8

对于 CSS 问题，我发现 Web 开发者插件非常有价值：

http://chrispederick.com/work/web-developer/

加载它，然后您就有 2 个可用的工具可供使用。

1. 从任何鼠标悬停元素上的文件继承 CSS，使用 shift-ctrl-y

2. 计算的CSS（包括不在.css文件中应用的任何内联样式=应用 - 或通过jquery等中的.css方法） - 按shift-ctrl-f

后者还将返回应用于该元素的所有类。

当然它还有其他伟大的用途，例如出色的表单调试，包括隐藏字段和 cookie 的编辑（可用于渗透测试）

Answer 9

您还可以检查该元素，然后在样式的标签应该有一个小下拉箭头。这将有类似“显示用户代理”，“展开速记属性”，那么就应该有根据该2个（我猜你正在检查的东西，有一个悬停状态）:active和:hover选择:hover，你应该是金色的。

Answer 10

我有同样的问题，结果发现，虽然我无法检查的Firebug在Firefox中盘旋的物体，Safari的网络督察将冻结当前状态，并允许检查。要激活Safari的网页检查只需要输入以下行到终端，并重新启动的Safari：

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

激活悬停元件在浏览器中，然后右击并选择“检查元素”。该网页将在它的当前状态冻结，让您在稍纵即逝的对象检查你的心脏的内容。

Answer 11

firebug中没有完美的解决方案（鼠标悬停/悬停模拟效果）。

但是，有几种方法可以在 Firebug 中编辑悬停状态：

1. 添加一个 :active 状态，以及您的 :hover

   a:hover, a:active { ... }

   如果您将鼠标放在元素上，拖出并释放，它会保持活动状态。

2. 关闭 :hover 状态变为 .hover 班级

   您可以通过单击源文件（在 Firebug 的“样式”选项卡中）来编辑 CSS 规则

   当然，您可以添加（和删除） .hover 来自你的元素的类。

Answer 12

我往往使一些替代CSS或Javascript“冻结”我的悬停事件;它与萤火虫调整到完美，并把我的悬停放回原处。

Answer 13

是的，你可以右键单击“检查元素”触发悬停状态时。这在Firebug和WebKit为我工作。

Answer 14

我知道这个帖子是有点老了，但对于那些谁找到这在谷歌，我创建了一个跨浏览器的工具，让您只需通过移动鼠标来可视化你的HTML / CSS布局。可以方便地查看他们的悬停状态的元件。

HTML方块展示台 - GitHub的

Answer 15

在较新版本的Firefox（至少V57及以上），检查员的UI是当其他的答案被张贴比稍有不同。启用和冻结的元件的:active / :hover / :focus状态，检查它（右键 - >检查元件），并在检查员点击：

结果：

源（图像被许可下CC-BY-SA V2.5，Mozilla的贡献者）