jQuery .hover-閃爍的圖像

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

發生問題是因為.productOverlay顯示在＃product_1的mouseleave ，因此觸發了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() 。 為什么？ 性能！ 稍后，隨着您的應用程序變得越來越大，您將必須注意事件及其執行情況。 特別是與鼠標有關的事件。 您想避免事件中長時間運行的代碼，因此采用本機解決方案:-)