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;可以将子元素放在父元素的底部下面。

Answer 2

试试这个......它基本上是相同的但是使用了.hover，这是mouseenter和mouseleave的组合功能。此外，它没有在进入孩子时离开父母的错误。

$(".job_charge.item-block").hover(function(){
    $(this).children(".edit-and-delete").fadeIn();
}, function(){
    $(this).children(".edit-and-delete").fadeOut();
});

http://jsfiddle.net/YWRRZ/4/＆lt; - 我可以测试它的小提琴链接

Answer 3

子元素可能设置为float，而您的父元素实际上小于您的预期。尝试删除float或将overflow: auto放在父...

上

当鼠标悬停在子元素上时，父元素认为我正在做mouseleave（）

3 个答案: