jQuery事件条件答案

【问题标题】：Jquery event conditionjQuery事件条件
【发布时间】：2014-02-11 09:50:14
【问题描述】：

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

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

我试过了：

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

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

jquery 事件中的第三个条件如何写。

谢谢。

【问题讨论】：

为您提供 html 代码。因为你的解释令人困惑
您可以为此发布您的标记吗？
你期待jsfiddle.net/XjAde这样的结果吗？
@Beginner，我希望 <div class="div2"> two </div> 仍然在你的 jsfiddle 中显示来自 <div id="div1"> first </div> 的鼠标离开。

标签： javascript jquery html css

【解决方案1】：

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

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

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

光标一离开div2，就会调用相应的mouseleave回调，重新开始计时。

【讨论】：

【解决方案2】：

试试这个。

HTML 代码：

<div class='div1'>Div One
    <div class='div2'>Div Two</div>
</div>

jQuery 代码：

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

工作示例：http://jsfiddle.net/Vmq8h/

【讨论】：

div1 和 div2 不相邻，所以如果这样做，如果鼠标离开 div1，我将无法进入 div2。
我想当你从 div1 离开后转到 div2 时，div2 是可见的。但是当你从 div2 离开鼠标时，它就变得不可见了。再次检查示例。 jsfiddle.net/Vmq8h
我的意思是，如果 div1 离 div2 20px 很远，那么我不能将鼠标悬停在 div2 上，因为当我将鼠标离开 div1 时它已经不可见了。
因为你必须使用 css 和更多元素。
有什么例子吗？

【解决方案3】：

这是一种方法。虽然我不确定它是否正确：

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

});

这里我检查 mouseleave 如果事件父级不是 div2。（意味着如果鼠标不在 div2 中）根据 if 条件，那么只有我们关闭弹出窗口。

【讨论】：

当鼠标从div1和div2离开时，div2仍然显示这个解决方案。
好的。根据我的理解，您从 div1 移动到 div2 然后退出。如果是这种情况，请在两个 div 上放置一个类，然后使用该类编写事件。用 .someCommonClass 替换 #div1。否则请提供更多详细信息。

【解决方案4】：

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

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

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

【讨论】：

第二个事件（mouseenter）不起作用。仍然给出与我相同的错误。
由于我项目中的 css 条件，我无法在您的 css 中设置 $("#div2").css("display", "block"); 和 #div2{display:none;}。
那有什么限制呢？给我们更多您的代码，即 div2 是否在 div1 内？
jsfiddle.net/bobkhin/4Ldfs ，但 #dropdown-menu 中的 display:block 和 class="popover 中的 display: none; 被省略。
对不起，那个小提琴不起作用。它有错误。我也不明白你最后的评论？那个小提琴与问题是什么有什么关系？

【解决方案5】：

你可以用 css 做到这一点：

.div2{
 visibility: hidden;
}

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

.div2:hover{
 visibility:visible;
}

【讨论】：

div1 和 div2 不相邻，所以如果这样做，如果鼠标离开 div1，我将无法进入 div2。