悬停在子元素上时触发鼠标移出事件

Question

当鼠标 hoverIn 时 - 我想添加一个框，并将其向上滑动。

当鼠标 hoverOut 时 - 框应该向下滑动，然后删除框。

在简单列表中，它可以完美地工作，我可以悬停在滑动元素上。 但是如果我使用图片，则在尝试悬停在滑动元素上时会导致闪烁效果。

• 正常工作。
• 不起作用。

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

此外，对于相关对象和类似情况，我需要使用stopPropagation吗？我无法理解它。

- Neo

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

    });

});

- Josh Jones

Answer 2

当你悬停在简单的li（工作示例）上并且框在鼠标指针下滑动时，你仍然技术上是悬停在li上。

然而，当你悬停在img上（不工作的示例）并且框在鼠标指针下滑动时，你被动地从图像中“悬停出来”。

在第二种情况下，jQuery看到你已经悬停出来了（即使是被动的），并开始悬停出序列。

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

1. 将图像作为li的背景。
2. 创建一个包含图像和框的div。然后你必须在父div上设置hoverin/hoverout效果。

- rantebi

Answer 3

img和div不是父子关系。 img不能包含任何内容。 您需要给它们一个共同的父项。 可能是，或者只是像您在第一个示例中使用li一样。

请参见http://jsfiddle.net/tXJDQ/26/以获取此类示例。

- James Montagne

---

我不明白，append() 方法将 <div id="box"/> 放在正确的位置[图片后面]，然后我使用 .next() 调用它？ - Neo

你的问题标题是“悬停在子元素上会触发鼠标移出事件”。但实际上你并没有悬停在子元素上，而是悬停在同级元素上。悬停事件是在 img 上触发的，当鼠标移入 div 时就已经离开了 img。 - James Montagne