jquery - 当鼠标在指定元素中移动时停止 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});

所以我的问题是我想mouseout在鼠标移入时是否有可能停止事件div.head？

Answer 1

.mouseout当你离开它绑定的元素时会触发 - 即使它是一个子元素。你最好使用.mouseleave它只会在你离开元素时触发（而不是悬停在孩子身上）http://api.jquery.com/mouseleave/

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