jQuery列表懸停

Question

我有一個jQuery滑塊工作運動與上一個和下一個按鈕。唯一需要的是，我需要它，以便當您將鼠標懸停在這些按鈕上時，會顯示下一張或上一張幻燈片的預覽圖，並且當您移開鼠標時，它們將被隱藏。我似乎無法得到它的工作...

$('.next_slide').mouseenter(function() { 
    $('.slide_container li').stop().animate({ left: -440 }, 10, 'easeInOutExpo');        
}); 

我的HTML是....

<div id="slides"> 
    <ul class="slide_container"> 
     <li class="one slide"></li> 
     <li class="two slide"></li> 
     <li class="three slide"></li> 
    </ul> 
    <div id="slide_nav"> 
     <a href="#" class="prev_slide">&laquo; Previous</a> 
     <a href="#" class="next_slide">Next &raquo;</a> 
    </div> 
</div> 

幻燈片的寬度1440px。

Answer 1

試試這個 -

$('.next_slide').hover(
    function(){ // OVER 
    $('.slide_container li').stop().animate({ left: -440 }, 10, 'easeInOutExpo'); 
    }, 
    function(){ // OUT 
    $('.slide_container li').stop().animate({ left: 0 }, 10, 'easeInOutExpo'); 
    } 
); 

Answer 2

你只有了mouseenter，沒有鼠標移出;你應該定義兩者。
如果您使用懸停，則可以將這兩個操作都包含在同一個腳本中。

例如（從jQuery位點）：

$("li").hover(
    function() { 
    $(this).append($("<span> ***</span>")); 
    }, 
    function() { 
    $(this).find("span:last").remove(); 
    } 
);