当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/