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

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);
    });
});