javascript - Jquery 事件条件

Question

我有两个 DIV，我想做的是:

• 如果我将鼠标悬停在 div1 上 => div2 显示
• 如果鼠标离开 div1 和 div2 => div2 隐藏
• 如果鼠标离开 div1 但它仍在 div2 => div2 显示
• 默认 div2 => 隐藏

我试过了:

 $("#div1,.div2").mouseleave(function(){
    setTimeout(function(){
        $(".popover").css("display", "none");
    }, 2000);
});

但是当我离开 div1 并将鼠标放在 div2 上时，2000 秒以上，div2 被隐藏了。

请问如何在 jquery 事件中写第三个条件。

谢谢。

Answer 1

当光标进入div2时，你必须取消挂起的超时:

var timer;
$("#div1,.div2").mouseleave(function(){
    timer = setTimeout(function(){
        $(".div2").css("display", "none");
    }, 2000);
});

$(".div2").mouseenter(function(){
    clearTimeout(timer);
});

一旦光标离开 div2，就会调用相应的 mouseleave 回调并再次启动计时器。