Html 悬停css上的背景色不更改

我用它来设计我网页的导航栏，但悬停时颜色不会改变

.nav {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}

.nav li {
    float: left;
}

.nav li a:hover,.nav li a:active {
    background-color:#7A991A;
}

.nav li a:link,.nav li a:visited {
    display:block;
    width:9em;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}

HTML代码：

<ul class = "nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="products.html">Our Products</a></li>
        <li><a href="aboutus.html">Contact us</a></li>
</ul>

---

有人能指出我做错了什么吗？

用

替换
.nav a:link
.nav li a

---

要么添加

！重要信息

此处：

.nav li a:hover,.nav li a:active {
    background-color:#7A991A !important;
}

---

或者将

：hover

（和

：active

）的属性移动到

：link

的属性之后。现在，这在小提琴中运行良好

.nav {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}

.nav li {
    float: left;
}

.nav li a:link,.nav li a:visited {
    display:block;
    width:9em;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}

.nav li a:hover,.nav li a:active {
    background-color:#7A991A;
}

---

您的

a:hover

被

a:link

等覆盖

我猜，由于

a:hover

与

a:link

处于同一级别，因此文件较低位置的Css类具有较高的优先级

您可以参考以下内容：

这是最新的

嵌套太多标记不是一个好的做法，给它一个类

仅当您要重写默认样式时，才使用

：link:visted:hover:active

css是层叠样式表、订单事项、put.nav链接，首先规范化默认样式，然后使用

：hover

和

：active

覆盖默认样式

！重要提示

这里不是一个好做法，只需重新安排顺序即可

---

你能包括html吗？我马上想到的是，“a”元素是否真的有高度。@Wisam@分号：我添加的HTML代码仍然相同problem@user3131961：您还有其他

nav

类css吗…？我在我的代码上尝试过。仅适用于你的演示中的中间链接bt，它适用于所有这些链接。我不明白它为什么起作用。谢谢！但是我不明白在

：link

之前编写它有什么问题？@user3131961 CSS会从上到下线性读取，通过在

a

之前声明

a:hover

，我猜在

a

之前声明的任何状态都会被覆盖。我试过了。这是工作，但后来我意识到，当我点击链接，颜色仍然保持不变。

.nav {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}

.nav li {
    float: left;
}

.nav li a:link,.nav li a:visited {
    display:block;
    width:9em;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}

.nav li a:hover,.nav li a:active {
    background-color:#7A991A;
}

.nav {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}

.nav li {
    float: left;
}
.nav li a:visited{
    background-color:#98bf21;
}
.nav li a:hover,.nav li a:active {
    background-color:#7A991A;
}

.nav li a{
    display:block;
    width:9em;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}

.nav {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}

.nav li {
    float: left;
}

.nav-link {
    display:block;
    width:9em;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}

.nav-link:hover,.nav-link:active {
    background-color:#7A991A;
}