当鼠标移动到指定元素时停止鼠标事件

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}); 

所以我的问题是我想是否有possiblility停在div.head事件mouseout当鼠标移动？

Answer 1

.mouseout将在您将元素绑定到它时触发 - 即使它是子元素。你最好使用.mouseleave当你离开的元素，这将只火（孩子不悬停）http://api.jquery.com/mouseleave/

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