Question

我在jQuery中为以下测试页面设置了.hover（）函数：

正如您将看到悬停在产品图像上时我想要显示的叠加层，当您将鼠标移到它上面时，它会闪烁。关于为什么以及我能做些什么来修复它的任何想法？它是否与我应用于图像的jQuery循环插件有关？

$("#productImage_1").hover(
    function() {
        $('#product_1').show();
    },
    function() {
        $('#product_1').hide();
    }
);

Answer 1

问题最明显的是，一旦叠加层出现，您就不再徘徊#productImage_1。您现在正在徘徊#product_1。这会产生一个无限循环的出现和消失（闪烁）。

$("#productImage_1, #product_1").hover(function() {
    $('#product_1').show();
}, function() {
    $('#product_1').hide();
});

Answer 2

问题出现是因为{product}上显示了.productOverlay，因此会触发mouseleave事件，因此会再次隐藏它。

有很多方法可以解决这个问题，但最平滑的解决方案之一（需要最少量的事件监听器）是检查e.target元素，看看它是否是叠加层。就这样：

$("#productImage_1").hover(function(e) {
    $('#product_1').show();
}, function(e) {
    // Prevent execution if it's the overlay that is being targeted
    if (e.target.className == 'productOverlay')
        return;

    // Otherwise, hide!
    $('#product_1').hide();
});

编辑：我鼓励人们尽可能多地使用香草JS;因此使用className代替$(e.target).hasClass()之类的内容。为什么？性能！随着您的应用程序变得越来越大，您将不得不关注事件及其执行方式;特别是与鼠标有关的事件。您希望避免在事件中长时间运行代码，因此请使用本机解决方案： - ）

Jquery .hover - 闪烁的图像

2 个答案: