當鼠標移動到指定元素時停止鼠標事件

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/