當mouseenter尚未完成時，Mouseleave不會觸發

Question

我在使用jquery的mouseenter和mouseleave時遇到問題。

當輸入div時，mouseenter函數將啓動。當我在mouseenter完成之前離開div時，mouseleave不會觸發。

我做了一個jsfiddle使其更容易理解。

http://jsfiddle.net/8sLLD/1/

代碼：

$("#menu1").mouseenter(function() { 
    //code 

}) 
    $("#image").mouseleave(function() { 
    //code 
}); 

因此，在進入按鈕時，將顯示圖像。在圖像出現之前（在光標接觸圖像之前）離開按鈕時，鼠標不會觸發。

編輯： 當使用#menu作爲mouseleave時，只需「移動」鼠標時，圖像就會變得非常奇怪。

我知道已經有一些這樣的問題，但他們都沒有爲我工作。

感謝，我的英語

Answer 1

您可以使用一個hover事件處理程序來設置和退出處理函數很多，對不起。

如果您將鼠標懸停在像#p2這樣的包裹元素上，將會更加簡單，所以當您輸入/退出包裝器而不是子元件時，它會被觸發。

代碼：

$('document').ready(function() { 
    $("#p2").hover(function() { 
     $(this).css("cursor", "pointer") 

     $("#image").css("left", "75"); 
     $("#image").stop().animate({ 
      width: "145px", 
      height: "145px", 
      left: "0" 
     }, 'slow'); 

     $("#c").animate({ 
      top: "100" 
     }, 'slow'); 

    }, function() { 
     $("#image").stop().animate({ 
      width: "0%", 
      height: "0%", 
      left: "75" 
     }, 'slow'); 
     $("#c").animate({ 
      top: "0" 
     }, 'slow'); 
    }); 
}); 

演示：http://jsfiddle.net/qwPvv/