Question

我正在创建一个网站，您将鼠标悬停在图像上并显示一个元素（在这种情况下，将其高度从0扩展到154px）。

jQuery(document).ready(function(){
    jQuery("#dropdown-menu-create .dropimage").mouseover(function(){
        jQuery("#dropdown-menu-create .toggle").animate({height:"154px"},200);
    });
    jQuery("#dropdown-menu-create .dropimage").mouseout(function(){
        jQuery("#dropdown-menu-create .toggle").animate({height:"0"},200);
    });
});

当鼠标离开时内容会扩展，当鼠标离开时内容会折叠，但每次鼠标移动内容时，内容会反复展开和折叠，直到鼠标离开元素。

我以前从来没有遇到过这个问题，过去我曾经使用过这些功能，所以我不知道发生了什么。有什么想法吗？

编辑：

jQuery(document).ready(function(){
    jQuery("#dropdown-menu-create .dropimage").mouseenter(function(){
        jQuery("#dropdown-menu-create .toggle").stop(true,true).animate({height:"154px"},200);
    });
    jQuery("#dropdown-menu-create .dropimage").mouseleave(function(){
        jQuery("#dropdown-menu-create .toggle").stop(true,true).animate({height:"0"},200);
    });
});

我现在正在使用上面的代码并仍然得到完全相同的问题。我已经尝试过.stop函数的所有变体（false，false）（false，true）（true，false）（true，true）。每个问题都会出现不同的问题，但仍然会发生。

终极编辑：

问题是，一旦调用该函数，鼠标所覆盖的内容就被不同的内容所覆盖。因此，在任何给定点，鼠标同时进入和离开图像。通过将函数调用移动到另一个元素来解决问题。

Answer 1

尝试使用.mouseenter事件而不是.mouseover

我认为会这样做！

Answer 2

您可能需要使用mouseenter代替mouseover和mouseleave代替mouseout

或者您可以尝试使用.hover功能，如下所示

jQuery(document).ready(function(){
    jQuery("#dropdown-menu-create .dropimage").hover(function(){ //mouseenter
        jQuery("#dropdown-menu-create .toggle").animate({height:"154px"},200);
    }, function(){ //mouseleave
        jQuery("#dropdown-menu-create .toggle").animate({height:"0"},200);
    });
});

Answer 3

由于您尝试在容器上实现此功能，因此您的正确事件处理程序为mouseenter和mouseleave。

示例：

$("#dropdown-menu-create .dropimage").mouseenter(function(){
    $("#dropdown-menu-create .toggle").animate({height:"154px"},200);
});
$("#dropdown-menu-create .dropimage").mouseleave(function(){
    $("#dropdown-menu-create .toggle").animate({height:"0"},200);
});

Answer 4

在.animate（）之前添加.stop（）将有助于解决此问题。通过停止上一个动画，如果用户快速将鼠标移动到元素上多次，则可以防止动画多次触发

Answer 5

虽然这可能不完全相关，但我遇到了类似的问题。我将最大限度地利用div来解决所有问题。为了解决它，我意识到当'hover'事件被触发时，切换的div已成为我的鼠标结束的那个。为了解决这个问题，我刚刚添加了一个事件来淡出鼠标。

    .profile-about {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 5%;
      left: 0;
      z-index: 2;
      display: none;
    }

.profile-image {
  max-height: 300px;
  max-width: 300px;
  -webkit-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.75);
} 

    $('.profile-image').hover(function(){
      $(this).next().fadeIn(100);
    });

    $('.profile-about').mouseleave(function(){
      $(this).fadeOut(100);
    });


    <img src="img/somebody.jpg" class="profile-image">
                    <div class="profile-about">
                        <p>
                         Hello I am somebody!
                        </p>
                    </div>

每次我在给定元素内移动鼠标时，鼠标悬停和鼠标移动都会触发

5 个答案: