当 Mouseenter 尚未完成时，Mouseleave 不会触发答案

【问题标题】：Mouseleave doesn't trigger when Mouseenter is not completed yet当 Mouseenter 尚未完成时，Mouseleave 不会触发
【发布时间】：2013-12-11 19:21:54
【问题描述】：

我在使用 jquery 时遇到了 mouseenter 和 mouseleave 问题。

当输入一个 div 时，mouseenter 函数将启动。当我在 mouseenter 完成之前离开 div 时，mouseleave 不会触发。

我制作了一个 jsfiddle 以使其更易于理解。

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

代码：

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

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

因此，当输入按钮时，会出现一个图像。当您在图像出现之前（光标接触图像之前）离开按钮时，mouseleave 不会触发。

编辑：当使用 #menu 进行 mouseleave 时，仅“移动”鼠标时图像会表现得非常奇怪。

我知道已经有一些这样的问题，但没有一个对我有用。

非常感谢，对不起我的英语

【问题讨论】：

当然不会，mouseleave事件是和图片绑定的，你期待什么？
"当您在图像出现之前离开按钮时（在您的光标接触图像之前），mouseleave 不会触发。"为什么应该？你能发布一个相关的 jsfiddle吗？
但是当我将 mouseleave 事件绑定到 div 时，它也会在鼠标悬停在图像上时触发。我怎么能解决这个问题？（这实际上是我的问题。）@Wolff 它应该触发鼠标离开，因为图像只会留在那里。
我猜你必须停止传播或使用鼠标悬停事件。但这与您发布的 jsfiddle 或代码有什么关系？
对不起！我张贴了错误的小提琴。我已经更新了链接。对不起

标签： jquery mouseenter mouseleave

【解决方案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/

【讨论】：

非常感谢您的帮助！这为我解决了这个问题。我见过一些人有同样的问题，所以希望这对其他人也有帮助。 :)
@colin 很高兴为您提供帮助！