如何调试CSS / Javascript悬停问题 [英] How to debug CSS/Javascript hover issues

问题描述

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

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

有什么方法可以冻结DOM的状态和应用程序：hover以便检查DOM

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

解决方案

添加 onmouseover 函数处理程序到采用：hover 。在这个函数中，在你想知道的元素上调用 console.info（element）。

  myHoverElement.onmouseover = function（）{
 console.info（document.getElementById（someotherelementofinterest））; 
}; 
  

当使用firebug active运行时，该元素将可以在firebug控制台中检查。 / p>

I often find myself wanting to debug CSS layout issues that involve DOM changes caused by Javascript in reaction to a hover event or different CSS rules applying due to the :hover selector.

Normally, I'd use Firebug to inspect the element that's giving me trouble and see what its CSS properties were, and where those properties come from. However, when hovering is involved, it becomes impossible, because as soon as you move your mouse down to the Firebug panel, the elements you're interested in are no longer hovered, the CSS rules that apply are different, and (in the case of JS hovers) the DOM is changed.

Is there any way I can "freeze" the state of the DOM and application of :hover in order to inspect the DOM as it was during a hover event?

Any other ideas on how to debug this sort of issue are welcome, of course.

解决方案

Add an onmouseover function handler to the element that is taking the :hover. Inside that function, call console.info(element) on whichever element you'd like to know about.

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

When you run this with firebug active, the element will be available to inspect in the firebug console.

这篇关于如何调试CSS / Javascript悬停问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！