如何调试 CSS/Javascript 悬停问题

问题描述

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

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.

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

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.

有什么方法可以冻结" DOM 的状态和 :hover 的应用程序，以便在 在悬停事件期间检查 DOM?

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.

推荐答案

将 onmouseover 函数处理程序添加到采用 :hover 的元素.在该函数中，对您想了解的任何元素调用 console.info(element).

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"));
};

当您在 firebug 活动的情况下运行此操作时，该元素将可用于在 firebug 控制台中检查.

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

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