爲什麼我的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

試試這個

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

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

},function(){ 

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

}); 
​ 

Answer 2

更改您的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(); 
    } 
}); 

Answer 3

如果在DOM最初加載，你想用delegate委託自己活動的.add_bag_large_droid元素不存在，而不是live：

$('.add_bag_large_wrap').delegate('add_bag_large_droid',{ 
    'mouseover': function(){ 
     $(this).children('.add_includes').fadeIn();   
    }, 
    'mouseout': function(){ 
     $('.add_includes').fadeOut(); 
    } 
}); 

$('.add_bag_large_wrap')表示DOM加載時保證存在的最近祖先。如果它是另一個元素，請更改選擇器。

Answer 4

試試這個代碼...

$('.add_bag_large_droid').mouseover(function(){ 

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

}); 

$('.add_bag_large_droid').mouseout(function(){ 

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

}); 

Answer 5

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

這應該工作，你可以綁定兩個的mouseenter和鼠標離開與懸停）事件（，上面是一樣的，如下：

$(selector).mouseenter(handlerIn).mouseleave(handlerOut); 

您還可以使用：

$(selector).mouseover(handlerIn).mouseout(handlerOut); 

Answer 6

使用jQuery它應該的最新版本是這樣的：

$(".add_bag_large_droid").on({ 
    mouseenter: function(){ 
     $(this).children('.add_includes').fadeIn(); 
    }, 
    mouseleave: function(){ 
     $(this).children('.add_includes').fadeOut(); 
    }}); 
​ 

但你設置的jQuery 1.6.4版本：在這種情況下，腳本將是相同的，但使用live代替on。

代碼：http://jsfiddle.net/jSStY/4/