Jquery 当鼠标在指定元素中移动时停止mouseout事件

总之，我知道

mouseover

和

mouseout

事件，当鼠标进出元素及其后代时会触发这些事件。 让我举一个例子，假设您有一个如下所示的dom结构：

<div id="top">
   <div class="container">
      <!--<div class="head">
      </div>-->
      <div class="content">
         <!--maybe there are many nested `div.contiainer` as children directly or not directly.-->
      <div>
   </div>
</div>

---

因此，我的问题是，当鼠标移入div.head时，是否有可能停止事件

mouseout

？

。mouseout

将在您离开其绑定的元素时触发-即使它是子元素。您最好使用

.mouseleave

，它只会在您离开元素时触发（而不是将鼠标悬停在子元素上）

---

Fiddle:

嗨，朋友，如果dom包含嵌套的

div.container

，我相信代码会非常冗长。谢谢

    $("div.container").on("mouseover",function(){//append div.head})
.on("mouseout",function(){//remove the div.head});