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

如果您需要检查元素的悬停状态，可以按照描述完成here https://stackoverflow.com/questions/17602611/inspect-a-hover-element问题是如果移动鼠标就会失去状态。

就我而言，它的 javascript 提供了悬停时的视觉效果。所以，基本上问题与上面描述的相同，但解决方案不适用。

如果你去：http://volkshotel.nl/ 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 内部是否有某种方法可以检查它？

您可以在中设置元素状态Chrome 开发工具 https://developer.chrome.com/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>