Question

如果这个问题得到解答我很抱歉，但我找不到答案..

我所拥有的是一个带有一些链接的DIV。我想要它做的是显示鼠标在它上面但在鼠标离开时淡出（DIV）。唯一的问题是，只要鼠标击中其中的链接，DIV就会淡出。那么有没有办法让它意识到链接也是DIV的一部分或者什么是最佳解决方案？

这是当前的代码：

的jQuery

$("#hoverbox").mouseover(function() {
    $("#hoverbox").fadeOut();
    $("#sub-menu").fadeIn("slow");
});

$('#sub-menu').mouseout(function() {
  $("#sub-menu").fadeOut();
  $("#hoverbox").fadeIn();
});

HTML

<div id="sub-menu">
<a href="test.html">test</a>
</div>
<div id="hoverbox"></div>

我不可能是唯一一个遇到这个问题的人，所以我很可能错过了一些非常基本的东西。

Answer 1

问题是您使用了错误的事件，想要使用mouseleave而不是mouseout，请查看以下可以使用的事件列表：

mouseenter / mouseout
mouseover / mouseleave

你已经学会了两对（包括或不包括内部元素）之间的区别，你是从这两组中混合的。

所以你只需要更改以下行：

$('#sub-menu').mouseout(function() {

这个：

$('#sub-menu').mouseleave(function() {

见工作demo。

Answer 2

这接近你想要的吗？

$("#hoverbox").mouseenter(function() {
    $("#hoverbox").hide("slow");
    $("#sub-menu").show("fast");
});

$('#sub-menu').mouseleave(function() {
   $("#sub-menu").hide();
   $("#hoverbox").show();
});

演示在这里：http://jsfiddle.net/UTaFL/

使用mouseenter和mouseleave在这里更好，因为它们忽略子元素并且只查看鼠标进入/离开指定元素的边界。

我还更改了fadeIn和fadeOut，因为它们可能会导致问题，因为它们能够在页面上实际显示之前调用mouseenter和mouseleave（以及mouseover和mouseout）事件。

jQuery mouseout不计算链接作为DIV的一部分？

2 个答案: