悬停在鼠标离开后仍然存在的 CSS 样式
Posted
技术标签:
【中文标题】悬停在鼠标离开后仍然存在的 CSS 样式【英文标题】：Hover CSS styling that persists after mouse away 【发布时间】：2016-02-18 05:27:46 【问题描述】：我有一个 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 来解决这个问题？
【问题讨论】：
似乎在此之前已经回答了这个问题：***.com/questions/17100235/… 我只是无法在我的测试中通过转换完全复制它，只有几行 css 行，甚至放置了 transition:5s;毕竟，我看不出有什么区别。 【参考方案1】：您可以在悬停和正常时添加不同的过渡。确保使用动画属性隐藏菜单！显示将不起作用，并且尝试从 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 秒内变为零，这应该足够快，以获得良好的用户体验。
当您停止悬停时，子菜单会保持三秒钟，然后以十倍的速度返回。
【讨论】：
哇，这对我来说很有意义，你是如何做到的，它也适用于多个 ul 元素，也适用于成熟的网站。非常感谢您的宝贵时间，我会调整计时器，看看效果如何！【参考方案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
【讨论】：
这看起来很酷，我会尽力理解它的所有功能 - 谢谢！【参考方案3】：在纯 CSS3 中，您可以使用过渡延迟：https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay 为下拉菜单的不透明度设置动画。 如果您不能使用 CSS3，则必须使用 JS（不一定是 jquery）
【讨论】：
以上是关于悬停在鼠标离开后仍然存在的 CSS 样式的主要内容，如果未能解决你的问题，请参考以下文章