jquery - 当鼠标悬停在子元素上时，父元素认为我正在执行 mouseleave()

Question

但事实显然并非如此。

我的JS:

$(".job_charge.item-block").live({
  mouseenter: function(){
    $(this).find('.edit-and-delete').stop(true,true).fadeIn();
  },
  mouseleave: function(){
    $(this).find('.edit-and-delete').stop(true, true).fadeOut();
  }
});

我的 HTML:

<div id="job_charge_2244" class="item-block job_charge">
          <div class="edit-and-delete right">
          </div>
</div>

CSS:

.item-block.job_charge
  border-bottom: 1px dotted #ccc
  display: inline-block
  padding-bottom: 15px
  width: 650px

  .edit-and-delete
    position: relative
    display: none
    top: 25px
    right: 5px
    float: right
    a
      margin-right: 8px

我已经疯了。当我将鼠标悬停在内部 div 中的链接上时，它会立即触发鼠标离开功能并且它们会隐藏。这个div自然是在position:relative中，但我也将它放在block中，它仍然有同样的问题。

父 div 位于 inline-block 中。

Answer 1

mouseenter 和 mouseleave 事件是专门为正确处理这种情况而设计的。当您输入子元素时，如果子元素实际上位于父元素内部，则不会为父元素触发 mouseleave 事件。

当我尝试您的代码时，当我将鼠标悬停在子元素上时，它不会触发 mouseleave 事件:

http://jsfiddle.net/baCsd/

我认为您的代码中的某些内容实际上将子元素放置在父元素的外部，这就是触发 mouseleave 事件的原因。

例如，如果父元素中没有内容，则只有内边距赋予其高度，因此它只有 15px 高，并且 position:relative; top: 25px; 可以将子元素放置在父元素底部的下方。