：悬停不适用于带样式的'a'标记

Question

我有a：hover机制一直工作，直到我实现了：active，：visited和：link方法，以防止链接在点击等时改变颜色，请你告诉我哪里出错了？

#header #navigation #textContainer h2 a:hover {
    color: #696969;
}

#header #navigation #textContainer h2 a:visited {
    color: #b3b3b3;
}

#header #navigation #textContainer h2 a:active {
    color: #b3b3b3;
}

#header #navigation #textContainer h2 a:link {
    color: #b3b3b3;
}

Answer 1

你的伪类顺序完全混淆了。

订单为:link，:visited，:hover，:active（也称为助记符“LoVe-HAte”）请参阅the spec。

#header #navigation #textContainer h2 a:link {
    color: #b3b3b3;    
}

#header #navigation #textContainer h2 a:visited {
    color: #b3b3b3;
}

#header #navigation #textContainer h2 a:hover {
    color: #696969;
}

#header #navigation #textContainer h2 a:active {
    color: #b3b3b3;
}

Answer 2

尝试移动a：hover声明，使其位于：visited声明之后。问题是每个选择器都有相同的specificity。

Answer 3

你有没有尝试过：

#header #navigation #textContainer h2 a:hover {
    color: #696969!important;
}

我猜测：悬停颜色会被其他定义覆盖。

Answer 4

设置a实际上会设置a:hover，a:visited，a:active和a:link。如果那是你想要改变的唯一颜色，你真的只需要设置a:hover。