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

Posted 2023-05-08

【中文标题】jQuery hover() 不适用于绝对定位的元素和动画

【英文标题】：jQuery hover() not working with absolutely positioned elements and animation

【发布时间】：2010-10-18 04:44:40

【问题描述】：

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

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

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

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

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

问题：

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

谢谢！

【参考方案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');
);

【讨论】：

我有类似的情况，这个解决方案在 IE8 中不适合我。有什么想法/建议吗？