jQuery悬停()不适用于绝对定位的元素和动画

Question

我有一些看起来像这样的 html:

<a href="#" class="move"><span class="text">add</span><span class="icon-arrow"></span></a>

我在 anchor 标记上注册了一个 jquery 事件:

$('a.move').hover(
    function (event) {
        $(this).children('span.text').toggle();
        $(this).animate({right: '5px'}, 'fast');
    },
    function (event) {
        $(this).children('span.text').toggle();
        $(this).animate({right: '0px'}, 'fast');
    }
);

当我将鼠标悬停在 anchor 标记上时，它会显示 span.text 并将 anchor 向右移动 5px。

现在，由于我不想陷入的复杂性，我必须设置position:relative;并绝对定位图标和文本，使图标出现在左侧，文本出现在右侧。

问题:

当我将鼠标悬停在 anchor 标记上时，图标向右移动，并且鼠标最终位于文本(显示的)上方。不幸的是，如果我将鼠标从图标移动到文本，并且动画开始疯狂循环，则会调用“out”函数。我不明白是什么导致“out”事件触发，因为鼠标永远不会离开 anchor 标记。

谢谢!

Answer 1

您可以使用“mouseenter”和“mouseleave”事件来代替悬停，这些事件在子元素妨碍时不会触发:

$('a.move').bind('mouseenter', function (e) {
  $(this).children('span.text').toggle();
  $(this).animate({right: '5px'}, 'fast');
})
.bind('mouseleave', function (e) {
  $(this).children('span.text').toggle();
  $(this).animate({right: '0px'}, 'fast');
});