jQuery:如何为mouseleave添加延迟，以便如果有人无意间将鼠标悬停在元素上，它仍然保持打开状态 [英] Jquery: How to add a delay to mouseleave so if someone accidentally hovers off the element unintentionally, it still stays open

问题描述

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

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

推荐答案

jQuery HoverIntent插件正是您想要的.

the jQuery HoverIntent plugin is exactly what your looking for.

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

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:

超时: 在调用"out"函数之前的简单延迟(以毫秒为单位).如果用户在超时到期之前将鼠标悬停在元素上，则不会调用"out"功能(也不会调用"over"功能).这主要是为了防止马虎/人的移动轨迹暂时(无意地)将用户从目标元素上移开，从而让他们有时间返回.默认超时:0

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

要进行设置...

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

然后定义处理over和out

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

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

您还可以调整interval属性以增加/减少startHover函数触发的时间...默认设置为100毫秒...您可以将其设置为零以触发弹出窗口只要您愿意，只要鼠标进入触发区域即可.

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.

这篇关于jQuery:如何为mouseleave添加延迟，以便如果有人无意间将鼠标悬停在元素上，它仍然保持打开状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！