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

我正在创建一个站点，您将鼠标hover在图像上，它显示一个元素（在这种情况下，通过将其高度从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); }); }); 

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

我之前从未遇到过这个问题，过去我曾经使用过这些function，所以我不知道发生了什么。 有任何想法吗？

编辑：

 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

或者您可以尝试使用.hoverfunction，如下所示，

 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

由于您尝试在容器上实现此function，因此正确的事件处理程序是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); });  
 
 Hello I am somebody!