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(); }
 );

jQuery - 在div上悬停，在div中滑动并能够悬停在新打开的div上

1 个答案: