Question

好的我已将这些链接设置了一段时间，并决定将悬停效果从使用下划线更改为颜色更改。我只是不明白为什么颜色不会改变。当我改变：悬停文字装饰下划线它有效但颜色只是说我设置的正常链接颜色（＃747474）

.footerList {
    display: inline;
    padding: 0 9px 0 9px;
}
.footerList a:link {
    text-decoration: none;
    color: #747474;
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
    padding: 0;
    margin: 0;
}
.footerList a:visited {
    text-decoration: none;
    color: #747474;
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
    padding: 0;
    margin: 0;
}
.footerList a:hover {
    text-decoration: none;
    color: red;
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
    padding: 0;
    margin: 0;
}
.footerList a:active {
    text-decoration: none;
    color: red;
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
    padding: 0;
    margin: 0;
}

<ul id="footerUlContainer">
<li class="footerList"><a href="privacy.php">Privacy Policy</a></li>
<li class="footerList"><a href="tos.php">Terms of Service</a></li>
<li class="footerList"><a href="tou.php">Terms of Use</a></li>
<li class="footerList"><a href="tou.php">Businesses</a></li>
</ul>

Answer 1

也许你的风格在其他地方被覆盖，我建议使用chrome dev tools，无论如何试试这个：

    #footerUlContainer > .footerList a:hover {
    text-decoration: none;
    color: red;
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
    padding: 0;
    margin: 0;
}

这是工作demo。

Aso查看此blog以更熟悉特异性规则

悬停时链接不会改变颜色

1 个答案: