如何找到导致 DOM 元素上的 :hover 动作的代码？

Question

我在代码中有元素。当我将鼠标悬停在它上面时，图像上会显示按钮。我试图找出是什么代码负责鼠标悬停操作。

我尝试在 Chrome 的开发工具中进行破解 - 没有结果。我在 CSS 中寻找悬停，没有这样的属性。我不知道下一步该做什么，如何调试该代码。

详细来说，我说的是元素 "add to cart" 将鼠标悬停在该商店模板上时显示的元素：https://demo.themeisle.com/shop-isle/product-category/clothing/dresses/

感谢您的任何建议，卢卡斯

Answer 1

.product:hover .product-button-wrap, .shop-item:hover .product-button-wrap {
    bottom: 50%;
    opacity: 1;
    -webkit-transition: all .4s;
    transition: all .4s;
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
    transform: translateY(50%);
}

悬停在最近的 .product 触发动画

Answer 2

查看 元素 > 样式 下 Chrome 调试工具中的 :hov 选项。然后您可以触发各种元素状态（例如：悬停）。

如下图所示，.product:hover .product-button-wrap 样式控制将鼠标悬停在产品上时添加按钮的显示方式。 .product:hover 为所有带有 CSS class product 的元素设置样式。 .product:hover .product-button-wrap 设置任何具有 class product-button-wrap 的元素的样式，当它们属于具有 class product 且悬停在其上的元素时。

Answer 3

Select 鼠标悬停在 "elements" 选项卡上的 div 元素。然后下面select"Event Listeners"。现在展开 "mouseover"。您将看到 lazyload.1.0.5.min.js:1 link。单击 link。这将使您进入 "Sources" 选项卡。现在在缩小源的左下角有一个“{}”按钮，当您将鼠标悬停时，它显示 "pretty print"，单击它。现在在 elements=>event listeners 上你会有 lazyload.1.0.5.min.js:79 link。从那里您可以看到源字符串编号。左键单击这些数字可以设置断点:)

return function(force) {
    if (running) {
        return
    }
    var delay = lazyRocketsConfig.throttle - (Date.now() - lastTime);
    running = true;
    if (delay < 4) {
        delay = 4
    }
    if (force === true) {
        getAF()
    } else {
        setTimeout(getAF, delay)
    }
}

如何找到导致 DOM 元素上的 :hover 动作的代码？

How to find the code causes a :hover action on DOM element?

javascript

css

debugging

onmouseover

hover