Javascript 悬停-闪烁的图像

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

正如您将看到的，当您将鼠标移到产品图像上时，我希望在产品图像上悬停时显示的覆盖图会闪烁。你知道为什么吗？我能做些什么来解决它？它是否与我应用于图像的jQuery循环插件有关

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

---

问题很可能是，一旦覆盖出现，您就不再停留在

\productImage\u 1

上。您现在将鼠标悬停在

#product_1

上。这创造了一个无限循环的出现和消失（闪烁）

---

问题很可能是，一旦覆盖出现，您就不再停留在

\productImage\u 1

上。您现在将鼠标悬停在

#product_1

上。这创造了一个无限循环的出现和消失（闪烁）

---

出现此问题的原因是，#product#1的顶部显示了

.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（）的操作。为什么？演出稍后，随着应用程序越来越大，您将不得不关注事件及其执行方式；尤其是与鼠标相关的事件。您希望避免在事件中长时间运行代码，因此采用本机解决方案：-）
出现问题的原因是，#product_1的顶部显示了
.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（）的操作。为什么？演出稍后，随着应用程序越来越大，您将不得不关注事件及其执行方式；尤其是与鼠标相关的事件。您希望避免在事件中长时间运行代码，因此采用本机解决方案：-）
您确定了问题，这很好，但解决方案是什么？$（“#productImage_1，#product_1”）.hover（function（）{$（'#product_1'）.show（）}，function（）{$（'#product_1'）.hide（））；我不确定我最初的解决方案是否有效，所以我将其删除。看起来它确实起作用了，所以我想我可以把它放回去：）很好，你发现了这个问题，但是解决方案是什么？$（“#productImage_1，#product_1”）.hover（function（）{$（'#product_1'）.show（）}，function（）{$（'#product_1'）.hide（）}）；我不确定我最初的解决方案是否有效，所以我将其删除。看起来它确实起作用了，所以我想我可以把它放回去：）我本来想说在父对象上实现悬停，但似乎父对象是body标记我本来想说在父对象上实现悬停，但似乎父对象是body标记