防止执行.mouseout事件 [英] Prevent .mouseout event from executing

问题描述

 < div class =canDo> 
我在这个HTML结构中列出了图片和描述。 
< p> 
< img src =http://placehold.it/100x100/> 
< span>说明1< / span> 
< / p> 
< p> 
< img src =http://placehold.it/100x100/> 
< span>说明2< / span> 
< / p> 
< p> 
< img src =http://placehold.it/100x100/> 
< span>说明3< / span> 
< / p> 
 
< p>< / p> 
< / div> 
  

我将< span> 隐藏CSS并使用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'）
 $（。can do p：last-child）。fadeOut（）; 
}，3000）; 
}）; 
}）; 
  

我遇到的问题是当我悬停第一个项目，然后第二个项目（和保持鼠标在第二个位置上）第一项中的 mouseout 函数被执行，使淡化效果和文本消失。

我怎样才能防止这种情况发生？

我也做了一个

解决方案

试试这个......我认为这是你想要的。让我知道如果它不是。

http://jsfiddle.net/bpd2Ldy1/

所以...我所做的是分配 setTimeout 函数的结果（它返回一个特定的超时id）赋给变量 tm 。如果它被设置（意思是3秒钟后某些东西正在消失），并且用户将鼠标悬停在另一个小盒子上，它将清除并停止超时。这允许它不会与新的mouseover事件冲突。如果没有任何 .canDo 被隐藏，超时将在3秒后完成不中断。

  $（document）.ready（function（）{
 $（。canDo img）。mouseover函数（）{
 $（。canDo img）。removeClass（'active'）。addClass（'fade'）; 
 $（this）.addClass（'active'）。removeClass（' fade'）; 
 
 if（typeof（tm）！='undefined'）{
 clearTimeout（tm）; 
} 
 $（。canDo p： （）。$（$。$ can $ 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）; 
}）; 
}）; 
  

I made a listing of images and description in this HTML structure:

<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>

I hide the <span> with CSS and add the description into the last <p> using a jQuery function. The HTML structure is chosen to work with my responsive layout as well.

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

The problem I'm having is that when I hover the first item and then the second item (and keep the mouse on that second one) the mouseout function from the first item is executed, making the fading effect and the text disappear.

How can I prevent that from happening?

I also made a jsFiddle.

解决方案

try this... I think it's what you want. let me know if it's not.

http://jsfiddle.net/bpd2Ldy1/

so... what I did was assign the result of the setTimeout function (which returns a specific timeout id) to the variable tm. If it is set (meaning something is fading out after 3 seconds), and the user mouses-over another little box, it will clear and stop the timeout. that allows for it to not conflict with the new mouseover event. if nothing .canDo is moused-over, the timeout will complete uninterrupted after 3 seconds.

$(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事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！