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); 
    });
});

防止执行.mouseout事件

1 个答案: