Question

我用它来设置我网页的导航栏样式，但悬停时颜色没有变化

.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 code：

<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>

有人可以建议我做错了吗？

Answer 1

在这里添加!important：

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

或者将:hover（和:active）的属性移到:link的属性之后。

Answer 2

将.nav a:link替换为.nav li a

demo

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

Answer 3

这在小提琴中工作得很好。

.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;
}

Answer 4

.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;
}

Answer 5

a:hover左右涵盖了a:link。

我想，由于a:hover与a:link具有相同的级别，因此位于文件较低位置的Css类具有较高的优先级。

您可以参考：

resolve css conflict

Answer 6

这是demo。

.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;
}

嵌套太多标签并给它上课是不好的做法。
仅在您要重写默认样式时才使用:link :visited :hover :active。
css是级联样式表，顺序很重要，先放入.nav-link来规范化默认样式，然后用:hover和:active覆盖默认值。
!important在这里不是一个好习惯，只需重新排列顺序。

背景颜色在悬停css上没有变化

6 个答案: