每当我在给定元素内移动鼠标时，Mouseover和mouseleave都会触发 [英] Mouseover and mouseleave trigger every time I move the mouse inside the given element

问题描述

我正在创建一个站点，您可以将鼠标悬停在图像上，并显示一个元素(在这种情况下，将其高度从0扩展到154px).

I am creating a site where you hover the mouse over an image and it shows an element (in this case by expanding its height from 0 to 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);
    });
});

当鼠标进入时内容会扩展，当鼠标离开时内容会折叠，但是每次在元素中移动鼠标 时，内容会反复扩展和折叠，直到鼠标离开元素为止.

The content expands when the mouse enters and collapses when the mouse leaves, but every time the mouse is moved within the element the content expands and collapses repeatedly until the mouse leaves the element.

我以前从未遇到过此问题，并且过去使用过这些功能，所以我对所发生的事情一无所知.有什么想法吗?

I've never had this issue before, and I have used these functions in the past, so i'm at a loss as to what is going on. Any ideas?

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).每个问题的发生方式不同，但仍然存在.

I am now using the code above and still getting the exact same issue. I have tried all variations of the .stop function (false,false)(false,true)(true,false)(true,true). The issue occurs differently with each one, but it still occurs.

最终

问题在于，一旦调用该函数，鼠标移过的内容就会被不同的内容覆盖.因此，在任何给定点，鼠标都同时进入和离开图像.通过将函数调用移至其他元素来解决该问题.

The problem was that the content that the mouse went over was covered up by different content once the function was called. Therefore, at any given point the mouse was simultaneously entering and leaving the image. Solved the issue by moving the function call to a different element.

推荐答案

尝试使用 .mouseenter 事件而不是使用事件.鼠标悬停

Try using the .mouseenter event instead of the .mouseover

我认为可以！

这篇关于每当我在给定元素内移动鼠标时，Mouseover和mouseleave都会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！