CSS悬停菜单：让悬停的菜单项，以保持悬停状态的css

enter image description here CSS悬停菜单：让悬停的菜单项，以保持悬停状态的css

enter image description here

在这种情况下，我怎么会得到设定，以保持悬停状态，而要扔的菜单项？有没有CSS的唯一方法，或者我将不得不引入一些JavaScript？谢谢。

来源

2011-09-07 Drew H

你的意思是你想强调一个留下来，如果你完全移动鼠标关闭菜单高亮？ –

是的。那是对的。我认为这是不可能的CSS。但不知道。 –

@DrewH - 它可以用普通的CSS。看到我的答案。 – Neal

它是可能只是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; 
}

来源

2011-09-07 21:38:44 Neal

感谢这工作。 –

@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>

来源

2011-09-07 21:47:06 JeffreyPia

尝试使用span标记中的顶层项目。假设：

<li> 
    <a><span>Setting</span></a> 
    <ul> 
    ... 
    </ul> 
</li>

那么这就是CSS：

li:hover span { 
    background: #color; 
    display: block; 
} 

li:hover ul { 
    display: block; 
}

来源

2011-09-07 21:48:43 lnguyen55

CSS悬停菜单：让悬停的菜单项，以保持悬停状态的css

回答

相关问题