如何在DOM元素上找到导致:悬停操作的代码?

看一看 :hov Chrome调试工具中的选项 元素>样式 . 然后可以触发各种元素状态(例如:悬停)。

如下图所示 .product:hover .product-button-wrap 样式控制产品悬停时添加按钮的显示方式。 .product:hover 使用CSS类设置所有元素的样式 product 当他们在上空盘旋时。 .产品:hover。产品按钮包装 使用类设置任何元素的样式 product-button-wrap 当它们属于具有类的元素时 产品 这是悬而未决的。

.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 触发动画

然后选择下面的“事件侦听器”。现在展开“鼠标悬停”。你会看到懒虫。1.0.5.min.js:1个链接。单击该链接。这将使您进入“来源”选项卡。 现在,在缩小源代码的左下角有一个“{}”按钮,当你将鼠标移到上面时,它会显示“漂亮的打印”,点击它。 现在在元素上=>事件侦听器您将有懒散的负载。1.0.5.min.js:79链接。 从那里可以看到源字符串编号。左键单击这些数字可以设置断点:)

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