JQuery的懸停環

Question

我有這個jQuery代碼的一個問題：

$(".item").mouseenter(function(){ 
    $(this).addClass("active"); 
    $(this).removeClass("item"); 
    $(".item").hide(700); 
}).mouseleave(function(){ 
    $(this).stop(); 
    $(this).addClass("item"); 
    $(this).removeClass("active"); 
    $(".item").show(700); 
}); 

，這是我的HTML：

<ul> 
    <li class="item">Item</li> 
    <li class="item">Item</li> 
    <li class="item">Item</li> 
    <li class="item">Item</li> 
    <li class="item">Item</li> 
</ul> 

我想，當我做一個項目懸停，其他項目是隱藏，代碼工作正常，但問題是，如果我在隱藏持續時間（700毫秒）懸停另一個項目，它會使隱藏/顯示項目循環。我能做些什麼來防止這種情況發生。

jsFiddle

注：我想懸停項目開始到離開，不保持固定。

Answer 1

您使用的是float: left至li元素..所以ul沒有寬度和高度。應用此CSS：

ul { 
    overflow: auto; 
} 

，也是我取得了jQuery的一些變化：

$(".item").on('mouseenter', mEnter) 
$('ul').on('mouseleave', function() { 
    $('.item').stop(); 
    $('.active').removeClass("active") 
     .addClass("item"); 
    $(".item").show(700); 
}); 

function mEnter() { 
    $(this).addClass("active"); 
    $(this).removeClass("item"); 
    $(".item").hide(700); 
} 

你申請 mouseleave事件給個體徘徊 LI元素，而不是即 UL父元素

。

Working Fiddle