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
• 小提琴：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;
}​

Answer 2

您需要申请display: block您的a标签。样式a和li是不同的，但两者都可以为它们设置背景。您将当前选项卡的背景设置li为，但是当您悬停时，您将背景应用于a. 选择一个并保持一致，我会推荐a和display: block;