jQuery hover()不使用绝对定位的元素和动画

I have some html that looks like this:

我有一些像这样的html:

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

And I have a jquery event registered on the anchor tag:

我在锚标记上注册了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');
    }
);

When I mouse over the anchor tag, it displays the span.text and moves the anchor 5px to the right.

当我在锚标记上单击时，它将显示跨度。文本并将锚点5px向右移动。

Now, due to complications that I don't feel like getting into, I have to set position: relative; on the container and absolutely position the icon and the text so that the icon appears on the left and the text on the right.

现在，由于并发症，我不想进入，我必须设置位置:相对;在容器上，绝对地定位图标和文本，以便图标出现在左边，文本出现在右边。

THE PROBLEM:

存在的问题:

When I mouse over the anchor tag, the icon moves right, and the mouse ends up over top of the text (which appears). Unfortunately, the 'out' function gets called if I move my mouse from the icon to the text and the animation starts looping like crazy. I don't understand what's causing the "out" event to fire, as the mouse is never leaving the anchor tag.

当我在锚标记上单击时，图标会向右移动，鼠标会在文本的顶部(出现)结束。不幸的是，如果我把鼠标从图标移动到文本，动画就会像疯了一样开始循环。我不明白是什么原因导致“out”事件触发，因为鼠标永远不会离开锚标签。

Thanks!

谢谢!

1 个解决方案

#1

Instead of hover you can use the "mouseenter" and "mouseleave" events, which do not fire when child elements get in the way:

您可以使用“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');
});