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

Question

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

有谁知道我会怎么做？

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

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

Answer 1

jQuery HoverIntent插件正是你想要的.

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

来自悬停意图网站的报价:

timeout:调用"out"函数之前的简单延迟(以毫秒为单位).如果用户在超时到期之前将鼠标移回元素,则不会调用"out"函数(也不会调用"over"函数).这主要是为了防止草率/人为的鼠标移动轨迹暂时(和无意地)将用户从目标元素中移除......给予他们返回的时间.默认超时: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毫秒...您可以将其设置为零以在鼠标进入后立即触发弹出窗口触发区域,如果您愿意.