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

您需要将display: block应用于a标记。样式a和li不同，但两者都可以设置背景。您将当前标签的背景设置为li，但是当您悬停时，您将背景应用于a。选择一个并保持一致，我建议a和display: block;

Answer 2

我建议进行以下更改：

让<li> 有效，而不是<a>。
结合:hover和.active规则，以便于维护。
普通和活动/悬停状态的填充不同。

演示： 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;
}

将鼠标悬停在li上并改变背景？

2 个答案: