15

我正在创建一个站点，您将鼠标悬停在图像上并显示一个元素（在这种情况下，通过将其高度从 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)。每个问题发生的问题不同，但仍然会发生。

终极编辑：

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

4

5 回答 5

12

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

我认为那会做！

于 2012-04-09T21:25:50.147 回答
6

您可能需要使用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);
    });
});
于 2012-04-09T21:26:18.540 回答
3

由于您试图在容器上实现这一点，因此您正确的事件处理程序是mouseenterand 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);
});
于 2012-04-09T21:27:32.970 回答
2

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

于 2012-04-09T21:25:43.507 回答
1

尽管这可能不完全相关，但我遇到了类似的问题。我会在 div 上移动最多的所有内容，该事件都会触发。为了解决这个问题，我意识到当“悬停”事件被触发时，切换的 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>
于 2017-05-09T20:03:51.020 回答