当鼠标移入指定元素时停止mouseout事件

Question

所有，我知道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.container中移动，我们在其中附加一个div.head。当鼠标移出时，我们删除鼠标移入时创建的div.head。

因此，代码将如下所示。

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

所以我的问题是，当鼠标在div.head中移动时，是否有可能停止event mouseout？

Answer 1

当你离开绑定到的元素时，.mouseout将会触发--即使它是一个子元素。最好使用.mouseleave，它只会在您离开元素(而不是将鼠标悬停在子元素上) http://api.jquery.com/mouseleave/时触发

小提琴：http://jsfiddle.net/zN4FF/