jquery - 为什么我的 mouseout fadeOut 有效，但随后又淡入？

Question

我有一个 div，其中有一个嵌套元素，当悬停在 div 上时会显示该元素。这行得通。

在 mouseout 上，嵌套元素应该隐藏，它确实隐藏了，但随后又立即淡入，就好像我刚刚将鼠标悬停在初始 div 上一样。

我做了 a jsfiddle replicating the issue over here .

html 是:

<div class="add_bag_large_wrap">

<div class="add_bag_large_droid" style="margin: 90px auto;">
        I am a button.
    <div class="add_includes">
        <p>Show on hover, hide on mouseout</p>

    </div>
</div>

JS:

 $('.add_bag_large_droid').live('hover',function(){

     $(this).children('.add_includes').fadeIn();         

 }).mouseout(function(){

     $('.add_includes').fadeOut();

 });
 ​

CSS:

.add_bag_large_wrap {
position: relative;
width: 390px;
height: 96px;
margin: 36px auto;
}

.add_bag_large_droid {
background: #ccc;
width: 390px;
height: 96px;
cursor: pointer;
background-size: 390px 192px;
position: static;
}

.add_includes {
background: #000; padding: 18px; color: #fff; position: absolute; 
bottom: 110px; left: 50%; margin-left: -148px;
display: none;
text-align: left;
}

.add_includes p {
font-size: 11px; color: #fff; margin: 0;
}

是什么导致了这种行为？

Answer 1

也更改您的 JS 代码:

 $('.add_bag_large_droid').hover(function(){
     $(this).find('.add_includes').fadeIn();         
 }, function(){
     $(this).find('.add_includes').fadeOut();
 });

使用 live():

$('.add_bag_large_droid').live({
    mouseover: function() {
        $(this).find('.add_includes').fadeIn();  
    },
    mouseout: function() {
        $(this).find('.add_includes').fadeOut();
    }
});