阻止執行.mouseout事件

Question

我在此HTML結構中列出了圖像和說明：

<div class="canDo">
    <p>
        <img src="http://placehold.it/100x100" />
        <span>Description 1</span>
    </p>
    <p>
        <img src="http://placehold.it/100x100" />
        <span>Description 2</span>
    </p>
    <p>
        <img src="http://placehold.it/100x100" />
        <span>Description 3</span>
    </p>

    <p></p>
</div>

我用CSS隱藏<span>並使用jQuery函數將描述添加到最后一個<p> 。 選擇HTML結構也可以與我的響應式布局一起使用。

$(document).ready( function() {
    $(".canDo img").mouseover( function() {
        $(".canDo img").removeClass('active').addClass('fade');
        $(this).addClass('active').removeClass('fade');
        $(".canDo p:last-child").fadeOut(function() {
            var msg = $('.canDo img.active').next('span').html()
            $(".canDo p:last-child").text(msg).fadeIn();
        });
    })
    .mouseout( function() {
        setTimeout(function(){
            $(".canDo img").removeClass('active fade')
            $(".canDo p:last-child").fadeOut();
        }, 3000);
    });
});

我遇到的問題是，當我將鼠標懸停在第一項然后第二項（並將鼠標懸停在第二項上）上時，將執行第一項的mouseout功能，從而使淡入淡出效果和文本消失。

如何防止這種情況發生？

我還做了一個jsFiddle 。

Answer 1

試試這個...我想這就是你想要的。 讓我知道是否不是。

http://jsfiddle.net/bpd2Ldy1/

所以...我所做的就是將setTimeout函數的結果（返回特定的超時ID）分配給變量tm 。 如果已設置（表示3秒鍾后某些東西逐漸消失），並且用戶將鼠標懸停在另一個小盒子上，它將清除並停止超時。 這樣就不會與新的mouseover事件發生沖突。 如果沒有鼠標懸停.canDo ，則超時將在3秒后不中斷地完成。

$(document).ready( function() {
    $(".canDo img").mouseover( function() {
        $(".canDo img").removeClass('active').addClass('fade');
        $(this).addClass('active').removeClass('fade');

        if (typeof(tm) != 'undefined') {
            clearTimeout(tm);
        }
        $(".canDo p:last-child").stop().fadeOut(function() {
            var msg = $('.canDo img.active').next('span').html()
            $(".canDo p:last-child").text(msg).stop().fadeIn();
        });

    })
    .mouseout( function() { 
        tm = window.setTimeout(function(){
            $(".canDo img").removeClass('active fade')
            $(".canDo p:last-child").stop().fadeOut("slow");  
        }, 3000); 
    });
});