jQuery的悬停在子元素使得古怪的效果

Question

我有这个标记（简体）：

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

我所强调的DIV当鼠标进入，显示了（否则隐藏）“已删除邮件”链接（它就像一个小垃圾桶），所以用户可以删除链接。

我不能使用'悬停'效果，因为我需要他们是活事件。所以我在做mouseover和mouseout。这是代码：

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

（鼠标在确切的对面）。

虽然动画看起来古怪，但我做错了什么？

非常感谢！

Answer 1

当鼠标进入和离开任何子元素时，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); 
});