这是我的
HTML代码
<div id="menus"> <ul> <li><a href="HomePage.html">Home</a></li> <li><a href="#">Users</a></li> <li><a href="#">Project Manage</a></li> <li><a href="#">Transaction</a></li> <li style="border-right:none;"><a href="#">logout</a></li> </ul> </div>
这是我的CSS
#menus li { float:left; list-style-type: none; padding-left: 25px; padding-right: 25px; border-right:groove 1px #FFFFFF; background: #666666; } #menus li:hover { background: #999999; } #menus li a { font-size:24px; text-decoration:none; color:#FFFFFF; } #menus li a:hover { color:#000000; }
现在我想在用户点击li时更改css(比如选择显示当前).我可以用css吗?如果是,那怎么样?
提前致谢..
解决方法
您只能使用焦点和tabindex来使用CSS
DEMO http://jsfiddle.net/kevinPHPkevin/LstNS/4/
li:focus { background: red; outline: 0; }
DEMO http://jsfiddle.net/kevinPHPkevin/LstNS/6/
资料来源:http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/