html - 将鼠标悬停在 li 上，背景会改变吗？

Question

我在将鼠标悬停在事件的 li 元素上时遇到问题。

• 屏幕截图 1(未悬停):http://i.imgur.com/9d2NQ.png
• 屏幕截图 2(悬停):http://i.imgur.com/W4J8O.png
• 屏幕截图 3(悬停在另一个 li 上):http://i.imgur.com/GOJSS.png
• fiddle :http://jsfiddle.net/LVLKW/3/

我需要当前类与悬停相同，我不确定我哪里出错了。

谢谢

Answer 1

我提出以下更改:

1. 制作<li> 活跃，不是<a> .
2. 合并:hover和 .active规则，便于维护。
3. 不要为正常 和事件/悬停 状态设置不同的填充。

演示: http://jsfiddle.net/LVLKW/11/

---

HTML

<div id="nav">
    <ul>
        <li class="current"><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
    </ul>
</div>​

CSS

body {
    background-color: lightblue;
}
#nav ul{
    margin-top: 23px;
    list-style: none;
}
#nav ul li{
    font-size: 17px;
    padding: 10px 11px 7px 11px;
    font-weight: bold;
    font-family: HelNue;
    display: inline;
}
#nav ul li.current,
#nav ul li:hover{
    font-family: HelNue;
    background-color: white;
    margin: 0;
    color: #58585a;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
#nav ul li:hover a{
    color: #58585a;
}

#nav ul li a{
    color: black;
}​