如何调试CSS/Javascript悬停问题

前端之家收集整理的这篇文章主要介绍了如何调试CSS/Javascript悬停问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我经常发现自己想要调试的CSS布局问题涉及DOM更改引起的Javascript的反应悬浮事件或不同的CSS规则应用由于:hover选择器。

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

有什么方法我可以“冻结”DOM的状态和应用程序:hover为了检查DOM,因为它是在一个悬停事件?

当然,欢迎任何其他想法如何调试这种问题。

解决方法

将一个onmouSEOver函数处理程序添加到采用:hover的元素。在这个函数内,调用console.info(element)对你想知道的元素。
myHoverElement.onmouSEOver = function() {
    console.info(document.getElementById("someotherelementofinterest"));
};

当你使用firebug active运行它时,该元素将可以在firebug控制台中检查。

猜你在找的CSS相关文章