Jquery:如何向 mouseleave 添加延迟,以便如果有人无意间将鼠标悬停在元素上,它仍然保持打开状态

发布于 2024-10-14 12:33:55 字数 433 浏览 16 评论 0原文

悬停意图插件与我需要的相反。 我有一个由 .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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

深空失忆 2024-10-21 12:33:55

jQuery HoverIntent 插件正是您所寻找的。

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

引用悬停意图网站:

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

要设置它...

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

然后定义处理 overout 的函数

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

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

编辑:

您还可以调整 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:

timeout:
A simple delay, in milliseconds, before the "out" function is called. If the user mouses back over the element before the timeout has expired the "out" function will not be called (nor will the "over" function be called). This is primarily to protect against sloppy/human mousing trajectories that temporarily (and unintentionally) take the user off of the target element... giving them time to return. Default timeout: 0

To set it up...

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

Then define the functions to handle over and out

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

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

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.

半世蒼涼 2024-10-21 12:33:55

这是最简单的方法,无需额外的插件:

$('.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 函数。

Here's the simplest way to do it, without additional plugins:

$('.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() and clearTimeout() are native JS functions of HTML DOM Window object since forever.

美人迟暮 2024-10-21 12:33:55

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

You could try using the jquery hoverintent plugin.

開玄 2024-10-21 12:33:55

这对我有用:

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

This works for me:

$(".triger").mouseenter(function() {
    $(this).find("popup").fadeIn();
}).mouseleave(function() {
    $(this).find("popup").delay(200).fadeOut();
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文