Jquery:如何向 mouseleave 添加延迟,以便如果有人无意间将鼠标悬停在元素上,它仍然保持打开状态
悬停意图插件与我需要的相反。 我有一个由 .trigger 触发的 .popup,当我将鼠标悬停在其上时,我希望 .popup 在几秒钟内不淡出,但如果我将鼠标悬停,然后再次悬停,则取消将要发生的淡出并保持 .popup 打开。
有谁知道我会怎么做?
这不起作用,但这是一个想法:
$('.trigger').hover(function(){
$('.popup').fadeIn(600)
}, function() {
$('.popup').delay(2000, function(){
if ($(this).blur() = true) {
$('.popup').fadeOut(600)
}
});
})
THE hoverintent plugin is the opposite of what I need.
I have a .popup that is triggered by .trigger, when i hover off of it, i want .popup to NOT fadeout for a few seconds, but if I hover off, then hover on again, cancel the fadeout that was going to happen and keep the .popup open.
Does anyone know how I would do this?
This DOESN'T work, but it was an idea:
$('.trigger').hover(function(){
$('.popup').fadeIn(600)
}, function() {
$('.popup').delay(2000, function(){
if ($(this).blur() = true) {
$('.popup').fadeOut(600)
}
});
})
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
jQuery HoverIntent 插件正是您所寻找的。
超时属性将设置在调用 out 函数之前鼠标需要离开该区域的时间。
引用悬停意图网站:
要设置它...
然后定义处理
over
和out
的函数编辑:
您还可以调整
interval
属性增加/减少 startHover 函数触发的时间...默认设置为 100 毫秒...如果您愿意,您可以将其设置为零,以便在鼠标进入触发区域时立即触发弹出窗口。the jQuery HoverIntent plugin is exactly what your looking for.
The timeout property will set the amount of time the mouse needs to be OUT of the area before the out function is called.
Quote from the hover intent website:
To set it up...
Then define the functions to handle
over
andout
EDIT:
You can also adjust the
interval
property to increase/decrease the amount of time for the startHover function to fire...the default is set to 100 milliseconds...you can set it to zero to fire off the popup as soon as the mouse enters the trigger area if youd like.这是最简单的方法,无需额外的插件:
setTimeout() 和clearTimeout() 一直以来都是 HTML DOM Window 对象的原生 JS 函数。
Here's the simplest way to do it, without additional plugins:
setTimeout() and clearTimeout() are native JS functions of HTML DOM Window object since forever.
您可以尝试使用 jquery hooverintent 插件。
You could try using the jquery hoverintent plugin.
这对我有用:
This works for me: