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

前端之家收集整理的这篇文章主要介绍了jQuery hover()无法使用绝对定位的元素和动画前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有一些看起来像这样的HTML

我在锚标记注册了一个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移动到右侧.

现在,由于我不想进入的并发症,我必须设定位置:相对;在容器上,绝对定位图标和文本,使图标显示在左侧,文本显示在右侧.

问题:

当我将鼠标悬停在锚标记上时,图标会向右移动,鼠标会在文本顶部(显示)上方结束.不幸的是,如果我将鼠标从图标移动到文本并且动画开始像疯了一样循环,则会调用’out’函数.我不明白导致“out”事件发生的原因,因为鼠标永远不会离开锚标记.

谢谢!

最佳答案
您可以使用“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');
});
原文链接:https://www.f2er.com/jquery/428170.html

猜你在找的jQuery相关文章