防止.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); 
    });
});