悬停CSS样式，鼠标移开后仍然存在 [英] Hover CSS styling that persists after mouse away
问题描述
我有一个HTML ul横幅，其中有两个li子栏，这些子栏在悬停时显示.但是，如果您将鼠标移开它或在另一个主条目上，则悬停会丢失.
I have a HTML ul banner that has two li sub-bars that are exposed on hover. However, if you mouse away from it or over another main entry, the hover is lost.
我想知道是否有某种方法可以在鼠标移开后轻松维护此悬停.这不是我能抛弃的东西，所以我很想扩展它以支持即使在将鼠标移开几秒钟后也可以保留它，但是如果将鼠标悬停在另一个li元素上，便能够看到新信息.
I was wondering if there was some way to easily maintain this hover after a mouse away. It's not something I can toss out so I'm very interested in extending it to support keeping it even after a mouse away for a few seconds, but being able to see new information if hovering over a different li element.
这是我的JSFiddle，带有一个非常简单的演示，其中包含我的HTML/CSS演示功能: JSFiddle
Here is my JSFiddle with an extremely simple demo with my HTML/CSS with the bare minimum to show off the feature: 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来解决此问题的指导.
I think I'm most interested in some sort of time delay that it can stay on screen, but all my attempts have failed. I am hoping someone can give me some guidance on solving this with some CSS I may be missing, or perhaps some jQuery?
推荐答案
您可以在悬停和正常时添加不同的过渡.确保使用可设置动画的属性隐藏菜单！显示无法正常工作，也请小心尝试从例如 height:0px; 转到 height:auto; .
You can add different transitions on hover and on normal. Make sure you hide your menu with an animatable property! Display won't work and also be careful trying to go from for example, height: 0px; to height: auto;.
这里是做到这一点的一种方法.
Here is one way to do it.
我已经把你的小提琴分叉了.首先，我删除了:hover 状态，然后添加了:
I've forked your fiddle. First I've removed the :hover states and then I added:
.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秒内变为零，这应该足够快以获得良好的用户体验.
You can see I've hidden your menu with a large top margin. When you hover over .select the margin becomes zero in 0.2s, that should be fast enough for a good user experience.
当您停止悬停时，子菜单会保留三秒钟，然后再慢十倍返回.
When you stop hovering the submenu remains for three seconds and then goes back up ten times slower.
这篇关于悬停CSS样式，鼠标移开后仍然存在的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
