jQuery - 在 div 悬停时，在 div 中滑动并能够将鼠标悬停在新打开的 div 上答案

【问题标题】：jQuery - On Hover of div, slide in div and be able to hover over the newly opened divjQuery - 在 div 悬停时，在 div 中滑动并能够将鼠标悬停在新打开的 div 上
【发布时间】：2011-02-10 05:41:59
【问题描述】：

我正在尝试将鼠标悬停在底部栏上，它将在其上方的另一个 div 中滑动，我可以单击位于其中的项目，然后当我将鼠标移开时，两个“出现的 div”都会滑开。

但是，当我将鼠标从底部栏中移动以单击新出现的 div（在 div 中滑动）中的某些内容时，它重新启用了效果，我该如何停止它以便我可以将鼠标悬停在两者上（在滑动之后in 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>

【问题讨论】：

你能把你拥有的东西放在jsFiddle 中吗？

标签： jquery jquery-plugins jquery-hover

【解决方案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>

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

【讨论】：