1

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

但是，当我将鼠标从底部栏中移动以单击新出现的 div 中的某些内容（在 div 中滑动）时，它重新启用了效果，我该如何停止它以便我可以将鼠标悬停在两者上（在 div 中的滑动之后启用）并让它重新启动效果，基本上将其放入相同的幻灯片向下/幻灯片效果的循环中。

这是我的代码：

$(".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>
4

1 回答 1

2

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(); }
 );
于 2011-02-10T05:50:52.280 回答