CSS悬停菜单:让悬停的菜单项,以保持悬停状态的css
问题描述:
在这种情况下,我怎么会得到设定,以保持悬停状态,而要扔的菜单项?有没有CSS的唯一方法,或者我将不得不引入一些JavaScript?谢谢。
答
它是可能只是CSS。
例如: 如果你的菜单由嵌套列表:
li:hover {
background: #color;
}
li:hover ul {
display: block;
}
li:hover ul li {}
小提琴:从上面的例子http://jsfiddle.net/maniator/ZC4xv/
CSS:
#nav-menu > li {
background: orange;
float: left;
padding: 10px;
border: 1px solid grey;
}
#nav-menu > li:hover a {
background: red;
padding: 2px;
display: inline;
}
#nav-menu > li ul {
display: none;
position: absolute;
}
#nav-menu > li:hover ul {
display: block;
margin-left: 5px;
}
#nav-menu > li:hover ul li {
background: blue;
}
#nav-menu > li:hover ul li:hover {
background: green;
}
+0
感谢这工作。 –
+0
@DrewH - 没问题^ _ ^ – Neal
答
假设子菜单一个嵌套的列表,你可以使用jQuery来添加一个悬停类到父菜单项:
<ul class="primary-nav">
<li>Menu Item 1
<ul class="sub-nav">
<li>Sub-Menu Item 1</li>
<li>Sub-Menu Item 2</li>
</ul>
</li>
<li>Menu Item 2</li>
</ul>
<script>
$('.primary-nav li').hover(function(){
$(this).addClass('hover');
}, function(){
$(this).removeClass('hover');
});
</script>
答
尝试使用span标记中的顶层项目。假设:
<li>
<a><span>Setting</span></a>
<ul>
...
</ul>
</li>
那么这就是CSS:
li:hover span {
background: #color;
display: block;
}
li:hover ul {
display: block;
}
你的意思是你想强调一个留下来,如果你完全移动鼠标关闭菜单高亮? –
是的。那是对的。我认为这是不可能的CSS。但不知道。 –
@DrewH - 它可以用普通的CSS。看到我的答案。 – Neal