如何在鼠标位于特定位置时检查仅存在的元素

Question

如果您需要检查元素的悬停状态，可以按照描述here完成。问题是如果移动鼠标则会松开状态。

在我的情况下，它的javascript提供悬停的视觉效果。因此，基本上问题与上述相同，但解决方案不适用。

如果您转到：http://volkshotel.nl/并将鼠标移到按钮/链接上，您将看到一个很好的故障效果。但很难检查。我已经提取了一个按钮

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

现在，如果应用了毛刺效应，则会在buzz-container元素内部发生某些事件，但似乎无法检查该元素。 Chrome内部有什么方法可以检查吗？

Answer 1

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

如果您希望Chrome在您的事件监听器上中断，您可以在来源标签中进行设置：

在您的情况下，您现在可以单步执行代码，直到创建要检查的元素（F11一次），从而导致：

<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>

Answer 2

您正在使用JavaScript来处理鼠标悬停事件。调试问题的一种可能方法是使用JavaScript来触发事件。

1. 如果右键单击＆gt;，您可以使用元素检查器中的放大镜图标找到该元素。检查元素不起作用
2. 使用已用$(element).trigger("mouseover")触发鼠标悬停事件
3. 如有必要，使用`$（element）.off（＆＃34; mouseout＆＃34;）
删除mouseout事件处理程序

然后您可以检查结果。在您的示例中，悬停事件似乎为元素添加了一些CSS类。

Answer 3

也许只是使用Javascript将其转储到控制台？例如，使用JQuery ......

$( "#element" ).mouseover(function(e) {
  console.log(e);
});

对于您的特定问题可能是这样的（未经测试！）

$( ".buzz" ).mouseover(function(e) {
   $(e.target).find('.buzz-container').each(function(idx, child){
       console.log(child);
    });
});

Answer 4

如果你正在使用Chrome DevTools（不了解其他浏览器），你可以使用事件监听器断点。

转到DevTools的Sources选项卡，展开右侧的Event Listener Breakpoints部分，展开Mouse并检查鼠标悬停框。

然后，将鼠标放在链接上：调试器将停止在修改链接样式的JavaScript函数中。按F10直到您到达该功能的结尾：您的链接现在已更改其样式，您可以在“元素”选项卡中根据需要进行检查。