一尘不染

如何调试CSS / JavaScript悬停问题

css

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

通常,我会使用Firebug来检查给我带来麻烦的元素,并查看其CSS属性是什么,以及这些属性来自何处。但是,当涉及到悬停时,这将变得不可能,因为一旦将鼠标移到Firebug面板上,感兴趣的元素就不再悬停,适用的CSS规则也会不同,并且(在这种情况下,
JS悬停)更改了DOM。

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

当然,任何其他有关调试此类问题的想法都欢迎。


阅读 238

收藏
2020-05-16

共1个答案

一尘不染

onmouseover函数处理程序添加到采用的元素:hover。在该函数内,调用console.info(element)您想知道的任何元素。

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

当您在启用Firebug的情况下运行此命令时,该元素将可在Firebug控制台中进行检查。

2020-05-16