如何检查只有鼠标在特定位置时存在的元素 [英] How to inspect an element which only exists if the mouse is at specific position

问题描述

如果您需要检查元素的悬停状态，可以按照此处问题是，如果你移动鼠标，你会松开状态。

If you need to inspect a hover state of an element it can be done as described here The problem is that you loose the state if you move the mouse.

在我的例子中，它的javascript提供了悬停的视觉效果。所以，基本上问题和上面描述的一样，但是解决方案不适用。

In my case its javascript providing the visual effect on hover. So, basically the issue is the same as described above, but the solution does not apply.

如果你去： http://volkshotel.nl/ ，将鼠标移动到按钮/链接上，您会看到一个很好的毛刺效果。但很难检查。我已提取了一个按钮

If you go to: http://volkshotel.nl/ and move your mouse over a button/link you'll see a nice glitch effect. But hard to inspect. I've extracted a button

<span class="buzz">
    <span class="buzz-original-text">Show me the way</span>
    <span class="buzz-container"></span>
</span>

现在如果应用毛刺效应，在 buzz-container 元素，但似乎无法检查该元素。

Now if the glitch effect is applied somethings happens inside the buzz-container element, but it seems not possible to inspect that element. Is there some way inside Chrome to inspect it ?

推荐答案

您可以在Chrome中设置元素状态 Chrome DevTools ：

You can set the element state in Chrome DevTools:

如果您希望Chrome在您的事件监听器上断开，您可以在来源标签：

If you want Chrome to break on your event-listener you can set this in the sources tab:

在您的情况下，您现在可以逐步执行代码，直到创建要检查的元素（F11一次），结果是：

In your case you can now step through the code until the element you want to inspect is created (F11 once) resulting in:

<span class="buzz-container"><span class="buzz-wrap" style="width: 109px; transform: translate(-0.631288939155638px, 0px);"><span class="buzz-target" style="transform: translate(0px, 0px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(0.245302784256637px, 2px);"><span class="buzz-target" style="transform: translate(0px, -2px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(-1.24612329155207px, 4px);"><span class="buzz-target" style="transform: translate(0px, -4px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(1.63969129044563px, 6px);"><span class="buzz-target" style="transform: translate(0px, -6px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(1.5060622766614px, 8px);"><span class="buzz-target" style="transform: translate(0px, -8px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(0.929074209183455px, 10px);"><span class="buzz-target" style="transform: translate(0px, -10px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(0.889030547812581px, 12px);"><span class="buzz-target" style="transform: translate(0px, -12px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(1.0943416710943px, 14px);"><span class="buzz-target" style="transform: translate(0px, -14px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(0.936934390105307px, 16px);"><span class="buzz-target" style="transform: translate(0px, -16px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(0.647303706966341px, 18px);"><span class="buzz-target" style="transform: translate(0px, -18px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(0.526725108735263px, 20px);"><span class="buzz-target" style="transform: translate(0px, -20px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(0.622202496044338px, 22px);"><span class="buzz-target" style="transform: translate(0px, -22px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(-1.97411663923413px, 24px);"><span class="buzz-target" style="transform: translate(0px, -24px);">Eat &amp; Drink</span></span></span>

这篇关于如何检查只有鼠标在特定位置时存在的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！