当鼠标悬停在子元素上时，父元素会认为我正在执行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中的链接上时，它们立即触发了一个mouse-leave函数并隐藏了。这个div自然是position: relative，但我也将其放置在block中，仍然存在同样的问题。

父div是inline-block。

- Trip

---

展示一下你的CSS，包括父元素和子元素。子元素设置为float，而父元素实际上比你预期的要小，这种情况是否可能发生？ - Jovan Perovic

这是因为在 DOM 看来，当你将鼠标移动到子元素上时，你离开了父元素，然后重新进入了它。可以点击这里获取更多相关信息。 - Blazemonger

目前子元素是 float: right。 - Trip

哇..我不知道浮点数会杀死电台之星。@jperovic，你是绝对正确的。浮点数毁了它。非常感谢你!! - Trip

实际上，根据文档，mouseenter和mouseleave是hover()的组成部分，因此移动到子元素上不应该触发mouseleave。我也不知道float也会影响这个。 - Dave

@jperovic，您介意将其作为答案提供，以便我可以标记为已完成吗？我认为这对社区来说是值得注意的。 - Trip

Answer 1

mouseenter 和 mouseleave 事件是专门设计用来正确处理这种情况的。当你进入子元素时，只要子元素确实在父元素内部，就不会触发父元素的 mouseleave 事件。

当我尝试您的代码时，当我悬停在子元素上时，它没有触发 mouseleave 事件：

http://jsfiddle.net/baCsd/

我认为您的代码中有一些东西实际上将子元素放在了父元素之外，这就是为什么会触发 mouseleave 事件的原因。

例如，如果父元素中没有内容，只有填充会给它高度，那么它只有 15px 高，position: relative; top: 25px; 可能会将子元素放在父元素底部以下。

- Guffa

---

这个对我有帮助。谢谢！ - Brendan

他可能正在使用mouseout。 - eomeroff

当你说“inside”时，是指“视觉上”还是“层级上”？例如，我不想在悬停在绝对定位的 SPAN（不是后代）上时在 DIV 上获得“mouseleave”事件，因为它恰好显示在 DIV 的顶部。这是否可能？ - cipak

Answer 2

可以尝试使用以下代码替代，它基本相同但使用了.hover函数，该函数相当于mouseenter和mouseleave的组合。此外，它不会出现进入子元素时离开父元素的bug。

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

http://jsfiddle.net/YWRRZ/4/ <-- 这是我的代码链接，你可以在这里测试它

- Rudi Hansen

---

иҝҷж®өд»Јз Ғе°Ҷжү§иЎҢдёҺй—®йўҳдёӯзҡ„д»Јз ҒзӣёеҗҢзҡ„ж“ҚдҪңгҖӮж–ҮжЎЈиҜҙжҳҺhoverж–№жі•жҳҜ$(selector).mouseenter(handlerIn).mouseleave(handlerOut);зҡ„з®ҖеҶҷеҪўејҸгҖӮ - Guffa

当然可以，但是出于习惯性的原因，我选择展示.hover的写法。 - Rudi Hansen

Answer 3

有可能子元素被设置为 float，而父元素实际上比预期的要小。尝试移除 float 或在父元素上加上 overflow: auto...

- Jovan Perovic

---

在我的情况下，我不得不将子元素的z-index设置为1，因为它是绝对定位的。不知道为什么，因为这总是成立的。 - Peter Ehrlich

感谢在包含浮动元素的父级上使用overflow:auto，我之前并不知道这一点。 - dajoto

对我来说，它是 overflow: hidden。 - Snickbrack

overflow: hidden 如何帮助浮动子元素？ - Jovan Perovic

溢出:auto修复了在父元素上使用display:flex时的这个令人讨厌的问题。父div似乎覆盖了devtools中的所有内容，所以我完全不知所措。 - noontz

Answer 4

使用mouseout事件替代mouseleave事件

- bencrow96

---

onMouseOut则相反，当鼠标离开任何子组件时触发。 - Eramir