jquery 每次在给定元素内移动鼠标时，Mouseover和mouseleave触发

wyyhbhjk 于 2022-12-12 发布在 jQuery

关注(0)|答案(5)|浏览(162)

我正在创建一个网站，您将鼠标悬停在一个图像上，它会显示一个元素（在本例中，将其高度从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）。每个变体出现的问题不同，但仍然出现。
最终编辑：
问题是，一旦调用函数，鼠标经过的内容就会被不同的内容所覆盖。因此，在任何给定的点，鼠标都是同时进入和离开图像的。通过将函数调用移动到不同的元素来解决这个问题。

jquery

来源：https://stackoverflow.com/questions/10080067/mouseover-and-mouseleave-trigger-every-time-i-move-the-mouse-inside-the-given-el

5条答案

按热度按时间

t1qtbnec1#

尝试使用.mouseenter事件而不是.mouseover
我想那就行了！

赞(0）回复(0）举报 2022-12-12

myzjeezk2#

您可能需要使用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);
    });
});

赞(0）回复(0）举报 2022-12-12

jw5wzhpr3#

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

赞(0）回复(0）举报 2022-12-12

j8yoct9x4#

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

赞(0）回复(0）举报 2022-12-12

jw5wzhpr5#

虽然这可能不完全相关，但我也有类似的问题。我在div上移动最多的东西，都会触发事件。为了解决这个问题，我意识到当“hover”事件被触发时，切换的div变成了我的鼠标所在的div。为了解决这个问题，我只是在那个div上添加了一个事件，在鼠标离开时淡出它。
第一个

赞(0）回复(0）举报 2022-12-12