【发布时间】：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 来解决这个问题？
【问题讨论】：
-
似乎在此之前已经回答了这个问题：stackoverflow.com/questions/17100235/…
-
我只是无法在我的测试中通过转换完全复制它，只有几行 css 行，甚至放置了 transition:5s;毕竟，我看不出有什么区别。
标签： html css hover jquery-hover mousehover