悬停在子元素上触发鼠标答案

【问题标题】：Hovering over child element firing mouse out悬停在子元素上触发鼠标
【发布时间】：2011-11-26 02:44:45
【问题描述】：

在hoverIn - 我想附加一个框，向上滑动。

在hoverOut - 盒子应该向下滑动然后移除盒子

在一个简单的列表上它完美地工作，我可以将鼠标悬停在滑动元素上。但是如果我使用的是图像，当我尝试将鼠标悬停在滑动元素上时会产生闪烁效果。

Working。
Not working。

将鼠标悬停在元素上，然后尝试将光标悬停在出现的红色框上。这里有什么区别，我错过了什么吗？

同样对于相关对象和类似情况，是否需要使用stopPropagation？我无法理解它。

【问题讨论】：

标签： jquery hover

【解决方案1】：

查看您的JsFiddle 的最新版本。我更新了 jQuery 以稍微不同地选择元素，所以现在它应该按照您想要的方式运行。

$('#aaa li').hover(function(){
    $(this).append('<div id="box"></div>'); 
    $(this).children('div').stop().animate({
        bottom:'0px'
    },{
    queue:false,duration:350
    });       
}, function() {  
    $(this).children('div').stop().animate({
        bottom:'-53px'
    },{
        queue:false,duration:300,complete:function() {
            $(this).children('div').remove(); 
        }

    });

});

【讨论】：

【解决方案2】：

img 和 div 不是父/子关系。 img 不能包含任何内容。你需要给他们一个共同的父母。也许是一个跨度，或者只是使用li，就像您在第一个示例中一样。

请参阅 http://jsfiddle.net/tXJDQ/26/ 作为此类示例。

【讨论】：

我不关注，追加将

您的问题的标题是“将鼠标悬停在子元素上，将鼠标移出”。您不是悬停在子元素上，而是悬停在兄弟元素上。悬停在img 上，鼠标悬停在div 上，鼠标悬停。

【解决方案3】：

当您将鼠标悬停在简单的 li（工作示例）上并且框在鼠标指针下方向上滑动时 ---> 从技术上讲，您仍然将鼠标悬停在 li 上。

但是，当您将鼠标悬停在 img 上（不工作的示例）并且框在鼠标指针下方向上滑动时 ---> 您被被动地“悬停”在图像之外。

在第二种情况下，jquery 看到您已经悬停（即使它是被动的），并开始悬停序列。

你有两个选择（我能想到的）来解决这个问题：

把图片作为背景放到li中。
创建一个同时包含图像和框的 div。那么您必须在该父 div 上设置悬停/悬停效果。

【讨论】：