javascript - 在鼠标悬停时打开一个 div 并保持打开状态直到鼠标移出？

Question

我有这样的标记:

<div class="wrapper-header">
<div class="container">
<div class="navbar">
<ul class="nav navbar-nav">
<li class=""><a href="#" class="toggle">Show Categories</a></li>
</ul>
</div>
</div>

<div class="wrapper-categories">
<div class="container">
Content Here
</div>
</div>

.wrapper-categories 默认是 display: none;，所以它只显示一次:

 $(".toggle").on('click', function (event){
               event.preventDefault();
               $(".wrapper-categories").slideToggle("fast");
                 $(this).html(function(i,html) {
                     if (html.indexOf('Browse') != -1 ){
                        html = html.replace('Show','Hide');
                     } else {
                        html = html.replace('Hide','Show');
                     }
                     return html;
                 });
             });

现在，我想将其更改为在 hover 上显示，而不是在 click 上显示，同时 .wrapper-categories 保持打开状态如果有人将鼠标移到链接上或不再位于内容 div 上并关闭。

我尝试将其替换为 $(".toggle").hover(function() { 并且有效，但它没有保持打开状态。我还必须做什么？

Answer 1

您的代码没有按您希望的方式工作是因为 .toggle 的悬停事件仅适用于自身。一旦您尝试将鼠标光标移到其内容 上，即 .wrapper-categories 下，光标就会超出 .toggle 范围。

这是一个工作示例，说明您需要如何实现它。您需要使用 ul 和 li 的简单结构稍微更改要创建的菜单的结构。

这是 FIDDLE .

HTML:

<ul class="nav navbar-nav">
<li class="menu"><a href="#" class="toggle">Show Categories</a>
    <ul>
        <li>
            Content Here
        </li>
        <li>
            Content Here
        </li>
        <li>
            Content Here
        </li>

    </ul>
</li>
</ul>

JS:

$(".menu").mouseover(function(){
    $(this).find('ul').css('visibility', 'visible');    
});
$(".menu").mouseout(function(){
    $(this).find('ul').css('visibility', 'hidden'); 
});

CSS:

.menu > ul{
    visibility:hidden;
}
.menu > ul > li:hover{
    font-weight:bold;
}