显示和隐藏延迟悬停的内容

我需要做一件事。我在网上有元素。当用户将鼠标悬停在这个项目上时，我需要例如显示警报。但延迟：当用户将鼠标悬停在项目上，并且在一秒钟的鼠标仍然在项目上时，将显示警报。我可以做到这一点，但我想在鼠标离开相同的项目时做同样的事情（当鼠标离开项目，一秒钟后仍然是项目外）。现在我用这个代码，但它当然这么想的同意离开显示和隐藏延迟悬停的内容

$('.test').hover(function(){ 
    mytimeout = setTimeout(function(){ 
    alert("enter"); 
    }, 1000); 
}, function(){ 
    clearTimeout(mytimeout); 
}); 


$('.test').mouseleave(function() { 
    alert("escape"); 
});

当然我不会与警报使用此工作;）我不知道该怎么做。悬停在悬停？还是用别的东西？谢谢你的帮助和对我的英语感到抱歉。

来源

2015-09-23 Robin71

您将需要超时在两个区块，进入/离开，如下面：

var $demo = $("#demo"); 
 
var timer; 
 

 
$('.test').hover(function() { 
 
    //Clear timeout just in case you hover-in again within the time specified in hover-out 
 
    clearTimeout(timer); 
 
    timer = setTimeout(function() { 
 
     $demo.text("enter"); 
 
    }, 1000); 
 
}, function() { 
 
    //Clear the timeout set in hover-in 
 
    clearTimeout(timer); 
 
    timer = setTimeout(function() { 
 
     $demo.text("exit"); 
 
    }, 1000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button class="test">Hover me!</button> 
 

 
<div id="demo"></div>

来源

2015-09-23 21:58:03 lshettyl

这正是我所需要的。谢谢。 – Robin71

你几乎已经拥有它了。 jquery hover函数接受两个参数onHoverStart（或onMouseOver）处理程序和onHoverStop（或onMouseLeave）处理程序。您只需要将警报添加到onHoverStop处理程序。

$('#test').hover(function(){ 
    setTimeout(function(){ 
    alert("enter"); 
    }, 1000); 
}, function(){ 
    setTimeout(function(){ 
    alert("escape"); 
    }, 1000); 
});

来源

2015-09-23 21:57:39

Working fiddle。

您可以按照mouseleave同样的想法，如果你愿意，你只需要清除计时器timer_mouseleave上hover事件：

var timer_mouseleave; 

$('.test').hover(function(){ 
     clearTimeout(timer_mouseleave); 

     mytimeout = setTimeout(function(){ 
     alert("enter"); 
     }, 2000); 
}, function(){ 
    clearTimeout(mytimeout); 
}); 

$('.test').mouseleave(function() { 
     timer_mouseleave = setTimeout(function(){ 
     alert("escape"); 
     }, 2000); 
});

希望这有助于。

来源

2015-09-23 22:05:04

试试这个。只需要重置每个悬停事件的超时时间。

(function(){ 
     var mytimeout = null; 
     $('.test').hover(function(){ 
      clearTimeout(mytimeout); 
      mytimeout = setTimeout(function(){ 
       alert("enter"); 
      },1000); 
     }); 
    })();

来源

2015-09-23 22:09:03 devnetice

显示和隐藏延迟悬停的内容

回答

相关问题