Javascript Jquery事件条件

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

如果我停留在div1=>div2 show上 如果鼠标从div1和div2左移=>div2隐藏 如果鼠标离开div1，但仍在div2=>div2显示 默认情况下，div2=>hide 我试过：

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

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

请说明如何在jquery事件中写入第三个条件

---

谢谢。

您可以在div2上添加另一个名为mouseenter的事件，然后可以取消在div1或div2中创建的任何超时；注意：为了清楚起见，我在下面的选择器中通过ID引用，因为您似乎有一个用于div1的ID和一个用于div2的类

---

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

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

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

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

试试这个

HTML代码：

---

工作示例：

以下是一种方法。虽然我不确定这是否合适：

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

})

---

在这里，我检查mouseleave上的事件父项是否不是div2。这意味着，如果根据if条件，鼠标不在div2中，则只有我们关闭popover。

您可以使用css执行此操作：

.div2{
 visibility: hidden;
}

.div1:hover .div2{
 visibility:visible;
}

.div2:hover{
 visibility:visible;
}

---

为您提供html代码。因为你的解释令人困惑，你能发布你的标记吗？你期待这样的结果吗？@初学者，我想要两个在你的JSFIDLE中，即使鼠标从第一个离开，仍然显示。第二个事件鼠标指针不起作用。仍然给出与我相同的错误。我无法设置$div2.cssdisplay，block；和div2{display:none；}在您的css中，这是由于我的项目中css的条件造成的？请提供更多代码，即div2是否在div1中，但在下拉菜单中显示：块，显示：无；课堂上=忽略了popover。对不起，那把小提琴坏了。它有错误。我也不明白你最后的评论？这把小提琴和问题到底有什么关系？当鼠标从div1和div2离开时，div2仍然显示这个解决方案。好的。根据我的理解，您从div1移动到了div2，然后又离开了。如果是这种情况，请在两个div上放置一个类，然后使用该类编写事件。将div1替换为.someCommonClass。请提供更多详细信息，否则。div1和div2不相邻，因此如果我这样做，如果div1中的鼠标左移，我将无法转到div2。div1和div2不相邻，因此如果我这样做，如果鼠标从div1中左移，我将无法转到div2。我想当您从div1中离开后转到div2时，div2是可见的。但当你把鼠标从第二版离开时，它就看不见了。再次检查示例。我的意思是，如果div1离div2 20px很远，所以我不能在div2上悬停，因为当我从div1离开鼠标时，它已经不可见了。为此，您必须使用css和更多元素。有关于这个的示例吗？

$('.div1')
.mouseover(function(){
    $('.div2').fadeIn();
})
.mouseleave(function(){
    $('.div2').fadeOut();
})

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

.div2{
 visibility: hidden;
}

.div1:hover .div2{
 visibility:visible;
}

.div2:hover{
 visibility:visible;
}