如何debuggingCSS / Javascripthover问题

我经常发现自己想要debugging涉及JavaScript引起的DOM变化的CSS布局问题，以响应hover事件或由于：hoverselect器而应用的不同CSS规则。

通常情况下，我会使用Firebug来检查给我带来麻烦的元素，看看它的CSS属性是什么，以及这些属性来自哪里。 但是，当涉及hover时，这是不可能的，因为只要您将鼠标移动到Firebug面板，您感兴趣的元素就不再徘徊，所应用的CSS规则就不同了， JShover）DOM被改变。

有什么办法可以“冻结”DOM的状态和应用：hover为了检查DOM 在hover事件？

当然，欢迎任何关于如何debugging这类问题的其他想法。

Answer 1

添加一个onmouseover函数处理程序到正在采取:hover的元素。 在那个函数里面，调用console.info(element)你想知道的任何元素。

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

当你使用firebug运行这个元素时，元素将可以在firebug控制台中进行检查。

Answer 2

你可以在Firebug中做到这一点，但它有点“车”。 如果您检查元素，然后单击HTML标签，例如，到DOM选项卡，当你回到HTML选项卡右侧的“样式”CSS选项卡将有一个箭头下拉select器，您可以select：将该元素hover状态为活动状态。 吮吸不得不切换标签，让它显示，但它适用于我。

Answer 3

在检查链接时，Firebug会显示默认的CSS状态，即应用于：链接的样式。 默认情况下，不显示：hover和：活动样式。 幸运的是，您可以通过单击样式并select适当的选项来更改链接的状态：

Answer 4

在firebug中，在HTML视图中，查看右侧面板并find“样式”选项卡。 点击向下的箭头并select:hover 。

Answer 5

在Firefox（v33.1.1）中：

• 检查元件（Q）
• 在DOM视图中，右键单击该元素
• 在上下文菜单的底部select：hover，：active或：focus

Answer 6

一些JavaScript工具包，比如Dojo，使用CSS类，比如dijitButtonHover风格而不是：hover。

所以样式选项卡：hover技巧不起作用。

相反，您可以右键单击“HTML”选项卡中的“节点”（CSS类更改）和“断开属性更改”

Answer 7

在Chrome（版本35）中：

• 检查元素
• 在元素查看器中右键单击该元素。
• select“Force element state” – >：active，：hover，：focus，：visited

Answer 8

对于CSS问题，我发现Web开发插件是非常宝贵的：

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

加载它，然后你有2个可能的工具在你的处置。

1. 从任何moused-over元素上的文件inheritancecss，使用shift-ctrl-y

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

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

当然它还有其他很好的用处，比如对表单的高级debugging，包括对隐藏字段和cookie的编辑（可以用于渗透testing）

Answer 9

您也可以检查该元素，然后在样式选项卡上应该有一个下拉箭头。 它会有像“显示用户代理”，“扩大速记属性”，那么应该有2更多的下面（我猜你正在检查有hover状态的东西） :active和:hoverselect:hover你应该是金黄的

Answer 10

我有同样的问题，并发现，虽然我不能用Firebug检查Firefox中的hover对象，Safari的Web检查员会冻结当前的状态，并允许检查。 要激活Safari的networking检查器，只需在terminal中input以下行并重新启动Safari：

 defaults write com.apple.Safari WebKitDeveloperExtras -bool true 

激活浏览器中的hover元素，然后右键单击并select“检查元素”。 该页面将冻结在当前状态，允许您检查转瞬即逝的对象到您的心脏的内容。

Answer 11

萤火虫没有完美的解决scheme（鼠标hover/hover模拟效果）。

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

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

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

   如果您将鼠标放在元素上，请将其拖放并释放，然后保持活动状态。

2. 将:hover状态转换为.hover类

   你可以通过点击源文件来编辑CSS规则（在Firebug的Style选项卡中）

   那么当然，你会添加（和删除）元素的.hover类。

Answer 12

我经常做一些替代的CSS或Javascript来“冻结”我的徘徊事件; 用Firebug调整到完美，并把我的hover放回原位。

Answer 13

是的，您可以在触发hover状态时右键单击“检查元素”。 这在Firebug和WebKit中适用于我。

Answer 14

我知道这篇文章有点旧了，但对于那些在Google上find这个的人，我创build了一个跨浏览器工具，只需要移动鼠标就可以看到你的HTML / CSS布局。 您可以轻松查看hover状态下的元素。

HTML Box Visualizer – GitHub