鼠标悬停和鼠标悬停时的 jQuery 动画

Question

我有以下代码，可在鼠标悬停时将 DIV block 向下移动 20px:

$('.outerDiv').mouseover(function()
{       
    $(this).animate({marginTop: "+=20px",},500);
});

$('.outerDiv').mouseout(function()
{       
    $(this).animate({marginTop: "-=20px",},500);
});

该 div 内部包含另一个 div。问题是，当鼠标悬停在内部 div 上时，会发生鼠标移出事件，并且 div block 会向上移动 20px。我想知道是否有一种方法可以仅在鼠标仅位于外部 div 外部时触发 mouseout 事件。

这是 HTML 结构:

<div class='outerDiv'>
    <div class='innerDiv'>
       bla bla bla
    </div>
</div>

Answer 1

您需要使用mouseenter和 mouseleave而不是 mouseover 和 mouseout 在子元素上触发时会冒泡到父元素。

这是 docs 的摘录。

mouseover fires when the pointer moves into the child element as well, while mouseenter fires only when the pointer moves into the bound element.

另外，按照 j08691 的建议，您可能只想使用 .hover因为此方法绑定(bind) mouseenter 和 mouseleave 事件的处理程序。