jQuery - 懸停div，滑入div，並能夠懸停在新打開的div

Question

我試圖將鼠標懸停在底部欄上，該欄會在另一個div的正上方滑動，我可以點擊位於其中的項目然後當我把鼠標都關掉時，「出現的div」會滑落。

但是，當我從底部欄移動鼠標點擊新出現的div中的某個內容（以div滑動）時，它重新啓用了效果，我該如何停止此操作，以便可以將鼠標懸停在滑動div在啓用），並有它如何重新啓動效果，基本上把它放入一個相同的slideDown/slideUp效果的循環。

這裏是我的代碼：

$(".playlist").hide(); 
$(".player, .playlist").hover( 
    function(){ $(".playlist").slideDown(); }, 
    function(){ $(".playlist").slideUp(); } 
); 

而我的HTML：

<div class="playlist"> 
<!-- This would display some content that I can click on --> 
</div> 

<div class="player"> 
<!-- This expands across the whole window and is fixed to the bottom --> 
</div> 

Answer 1

http://jsfiddle.net/jv25Y/

新的標記

<div class="player"> 
    <div class="playlist"> 
     This would display some content that I can click on 
    </div> 
    This expands across the whole window and is fixed to the bottom 
</div> 

新的JS

$(function(){ 
    $(".playlist").hide(); 
    $(".player").hover( 
     function(){ $(".playlist").slideDown(); }, 
     function(){ $(".playlist").slideUp(); } 
    ); 
}); 

將類似的東西的工作？基本上播放列表現在包含在播放器中。因此，當您嘗試點擊播放列表中的鏈接時，您的鼠標不會離開播放器。如果這並不很適合（由於您的網頁等造型），你也可以換一個單元周圍的播放列表和播放器，然後調用懸停於它，而不是像這樣，

標記

<div id="wrapper"> 
    <div class="playlist"> 
     This would display some content that I can click on 
    </div> 
    <div class="player"> 
     This expands across the whole window and is fixed to the bottom 
    </div> 
</div> 

JS

$("#wrapper").hover( 
    function(){ $(".playlist").slideDown(); }, 
    function(){ $(".playlist").slideUp(); } 
);