悬停 CSS 鼠标离开后仍然存在的样式

Question

我有一个 HTML ul 横幅，它有两个在悬停时显示的 li 子栏。但是，如果您将鼠标移开它或悬停在另一个主要条目上，悬停就会消失。

我想知道是否有某种方法可以在鼠标离开后轻松保持这种悬停状态。这不是我可以扔掉的东西，所以我非常有兴趣扩展它以支持即使在鼠标离开几秒钟后也能保持它，但如果将鼠标悬停在不同的 li 元素上则能够看到新信息。

这是我的 JSFiddle，其中包含一个极其简单的演示，其中包含我的 HTML/CSS 以及展示功能的最低限度：JSFiddle

<body>
<div class="nav-outer-repeat">
    <div class="nav">
        <div class="table">
            <ul class="select">
                <li style="color: white;"> <a><b>Hover Test</b></a>

                    <div class="select_sub">
                        <ul class="sub">
                            <li style="color: white;"><a href="">Test</a>
                            </li>
                            <li style="color: white;"><a href="">Test</a>
                            </li>
                            <li style="color: white;"><a href="">Test</a>
                            </li>
                        </ul>
                        <ul class="sub">
                            <li style="color: white;"><a href="">Test</a>
                            </li>
                            <li style="color: white;"><a href="">Test</a>
                            </li>
                            <li style="color: white;"><a href="">Test</a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="clear"></div>
    <div id="content-outer">
        <div id="content"></div>
    </div>

#content-outer  {
background: url(../../core/images/shared/content_repeat.jpg) repeat-x;
}
#content    {
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 18px;
    margin: 0 auto 0 auto;
    max-width: 100%;
    min-width: 780px;
    padding: 15px 0px 25px 0px;
}
.nav-outer-repeat   {
    background: url(../../core/images/shared/nav/repeat.jpg) repeat-x;
    height: 77px;
}
.nav    {
    float: left;
    font-family: Tahoma;
    font-size: 13px;
    height: 38px;
    position: relative;
    width: 1080px;
    min-width: 600px;
    z-index: 500;
}
.nav-divider    {
    background: url(../../core/images/shared/nav/divider.jpg) top no-repeat;
    float: left;
    height: 40px;
    width: 15px;
}
.nav .select,
.nav .current   {
    display: table-cell;
    float: left;
    list-style: none;
    margin: 0 0px 0 0;
    padding: 0;
    white-space: nowrap;
}
.nav li {
    float: left;
    height: auto;
    margin: 0;
    padding: 0;
}
.nav .select a  {
    color: #fff;
    display: block;
    float: left;
    height: 37px;
    line-height: 35px;
    padding: 0 0px 0 0px; 
    text-decoration: none;
    white-space: nowrap;
}
.nav .select_sub    {
    display: none;
    margin: 0 0 0 10px;
}
.nav .sub   {
    display: table;
    list-style: none;
    padding: 0;
}
.nav .select :hover .select_sub, 
.nav .current .show {
    background: url(../../core/images/shared/nav/back_0.gif);
    height: 75px;
    display: block;
    left: 0;
    padding: 0;
    position: absolute;
    text-align: left;
    top: 37px;
    width: 1200px;
    z-index: 100;
    transition:0s 50s;

}
.nav .select :hover .sub li a, 
.nav .current .show .sub li a   {
    background: transparent;
    border: 0;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    display: block;
    float: left;
    margin: 0;
    padding: 0 10px 0 10px;
    white-space: nowrap;
}
.clear  {
    clear: both;
    font-size: 0px;
    height: 0;
    line-height: 0px;
    margin: 0px;
    padding: 0px;
}

我想我最感兴趣的是它可以留在屏幕上的某种时间延迟，但我所有的尝试都失败了。我希望有人能给我一些解决这个问题的指导，我可能会遗漏一些 CSS，或者 jQuery?

Answer 1

在纯 CSS3 中，您可以使用过渡延迟：https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay 为下拉菜单的不透明度设置动画。如果不能用CSS3就得用JS（不一定jquery）

Answer 2

类似这样的东西..但是我试过了。

HTML:

     <div class="menu">
        <p>Hover</p>
        <ul class="menu-content">
            <li>
                <ul>
                    <li>Menu 1</li>
                    <li>Menu 1</li>
                    <li>Menu 1</li>
                    <li>Menu 1</li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>Menu 2</li>
                    <li>Menu 2</li>
                    <li>Menu 2</li>
                    <li>Menu 2</li>
                </ul>
            </li>   
        </ul>
    </div>

CSS:

.menu {
    width: 98%;
    text-align: center;
    padding: 20px 1%;
    background-color: #eee;
    overflow:  hidden;
}

.menu p {
    margin: 20px 0;
    color: #096847;
    font-size: 1.3em;
}

.menu:hover .menu-content {
    margin-top: 0;
}

.menu-content {
    margin-top: -100%;
    overflow: hidden;
    transition: all 1s ease-in;
}

.menu-content li {
    list-style-type: none;
}

.menu-content > li > ul > li {
    width: 25%;
    float: left;
    padding: 20px 0;
    background-color: #2aa87c;
    outline: 1px solid #ddd;
    cursor: pointer;
    color: #fff;
}

结果：

EXAMPLE

Answer 3

您可以在悬停时和正常时添加不同的过渡。确保使用动画属性隐藏菜单！显示将不起作用，并且还要小心尝试从 height: 0px; 到 height: auto;。

这是一种方法。

I've forked your fiddle。首先，我删除了 :hover 状态，然后添加：

.nav .select_sub{
  display: block;
}
.nav .select:hover .select_sub, 
.nav .select:hover .sub li a{
  margin-top: 0%;
  transition: all 0.2s;
}
.nav .select .select_sub, 
.nav .select .sub li a{
  margin-top: -100%;
  transition: all 2s 3s;
}

您可以看到我用较大的上边距隐藏了您的菜单。当您将鼠标悬停在 .select 上时，边距会在 0.2 秒内变为零，这对于良好的用户体验来说应该足够快了。

当您停止悬停时，子菜单会保留三秒钟，然后以十倍的速度返回。

悬停 CSS 鼠标离开后仍然存在的样式

Hover CSS styling that persists after mouse away

html

css

hover

jquery-hover

mousehover