Jquery:如何为mouseleave添加延迟,这样如果有人意外地无意中将元素hover,它仍然保持打开状态

hoverintent插件与我需要的相反。 我有一个由.trigger触发的.popup,当我将它hover时,我希望.popup不会淡出几秒钟,但是如果我将其hover,然后再次hover,则取消将要发生的淡出并保持.popup打开。

有谁知道我会怎么做?

这不起作用,但这是一个想法:

$('.trigger').hover(function(){ $('.popup').fadeIn(600) }, function() { $('.popup').delay(2000, function(){ if ($(this).blur() = true) { $('.popup').fadeOut(600) } }); }) 

jQuery HoverIntent插件正是你想要的。

timeout属性将设置在调用out函数之前鼠标需要超出该区域的时间。

来自hover意图网站的报价:

timeout:调用“out”函数之前的简单延迟(以毫秒为单位)。 如果用户在超时到期之前将鼠标移回元素,则不会调用“out”函数(也不会调用“over”函数)。 这主要是为了防止草率/人为的鼠标轨迹暂时(并且无意地)将用户从目标元素中移除……给予他们返回的时间。 默认超时:0

设置它……

 $('.trigger').hoverIntent({ over: startHover, out: endHover, timeout: 2000 }); 

然后定义要处理的函数

  function startHover(e){ //your logic here $('.popup').fadeIn(600) } function endHover(){ //your logic here $('.popup').fadeOut(600) } 

编辑:

您还可以调整interval属性来增加/减少startHover函数触发的时间…默认设置为100毫秒…您可以将其设置为零以立即触发弹出窗口如果您愿意,进入触发区域。

这是最简单的方法,没有额外的插件:

 $('.trigger').hover(function() { clearTimeout(this.timer); $('.popup').fadeIn(600); }, function() { this.timer = setTimeout(function() { if ($(this).blur() = true) { // off topic: you should to check this condition ;) $('.popup').fadeOut(600); } }, 2000); }); 

setTimeout()和clearTimeout()是HTML DOM Window对象的本机JS函数,因为它永远存在。

您可以尝试使用jquery hoverintent插件。

这对我有用:

 $(".triger").mouseenter(function() { $(this).find("popup").fadeIn(); }).mouseleave(function() { $(this).find("popup").delay(200).fadeOut(); });