首页 文章

jQuery悬停在子元素上会产生奇怪的效果

提问于
浏览 次
1

我有这个标记（简化）：

<div class='item'>
  <a> one link </a>
  <a class='trash'><img src='trash.png'/></a>
</div>

我在鼠标进入时突出显示div，并显示（否则隐藏）'垃圾'链接（它就像一个小垃圾桶），以便用户可以删除链接 .

我可以't use '悬停'效果，因为我需要它们是 live 事件 . 所以我正在做mouseover和mouseout . 这是代码：

$('div.link').live('mouseout', function(e){
        console.log(e)
        if(e.target == this){
            $(this).removeClass('hover');
            $(this).children('a.trash').fadeOut();
        }
    });

（鼠标悬停在完全相反的位置） .

动画看起来很古怪，我做错了什么？

非常感谢！

jquery events dom event-bubbling

1 回答

  • 13

    当鼠标进入和离开任何子元素时，也会触发 mouseover 和 mouseout 事件 . 请尝试使用 mouseenter 和 mouseleave 事件 .

    不幸的是，live方法在添加/删除链接时不必手动绑定它们 .

    function toggleDelete() {
      $(this)[($(this).hasClass('hover') ? 'remove' : 'add') + 'Class']('hover');
      $(this).find('a.trash').toggle();
}

$('div.link').bind('mouseenter, mouseleave', toggleDelete);

$('.add').click(function(e) {
    var link = $('<a />').addClass('link');
    link.bind('mouseenter, mouseleave', toggleDelete);
    $('.parent').append(link);
});
    回复于

相关问题