Html 将鼠标悬停在li上，背景会发生变化吗？

我在活动li项目上悬停时遇到问题

• 屏幕截图1（不悬停）：
• 屏幕截图2（悬停）：
• 屏幕截图3（悬停在另一个li上）：
• 小提琴：

我需要当前的类是一样的悬停，我不知道我在哪里出了错

---

谢谢

您需要将

display:block

应用于您的

a

标记。样式设置

a

和

li

是不同的，但它们都可以设置背景。当前选项卡的backgronud设置为

li

，但当您悬停时，您将背景应用于

a

。选择一个并保持一致，我建议

a

和

display:block
我建议进行以下更改：

使
处于活动状态，而不是


HTML

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

像这样我希望你看起来像这样：-
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;
}​