链接访问后html链接悬停不起作用？答案

【问题标题】：html link hover not working after link visited?链接访问后html链接悬停不起作用？
【发布时间】：2013-10-01 15:20:02
【问题描述】：

在 css 中，我这样定义文本链接的行为：

a:link {
    color: gray;
}

a:active {
    color: #9999ff;
}

a:hover {
    color: #9999ff;
}

a:visited {
    color: gray;
}

工作正常。在我访问一个链接后，它应该/并且仍然具有相同的颜色。但是，这就是我没有得到的……在我访问了一个链接后，它不再悬停了。如何使文本链接始终以相同的方式运行：例如链接：灰色悬停：蓝色？？？

谢谢

【问题讨论】：

这只是一个猜测，但如果您将悬停规则放在访问规则之后会怎样。 CSS 在一定程度上是特定于订单的。

标签： javascript html css hover

【解决方案1】：

@Frits van Campen 是正确的，访问的伪类选择器覆盖了悬停选择器，this fiddle has it fixed.

a:link {
    color: gray;
}
a:active {
    color: #9999ff;
}
a:visited {
    color: gray;
}
a:hover {
    color: #9999ff;
}

【讨论】：

不使用时不需要指定visited。您可以简化此代码：a {color: gray;} a:active, a:hover {color: #99f;}
@aaronburrows 显然它的颜色相同，但也许 OP 想使用不同的颜色，但没有费心在问题中包含该细节。

【解决方案2】：

这是一个CSS Specificity 问题。

相同特性的规则将按照定义的顺序应用。

您应该将更重要的规则移到列表底部，以便它们优先。

【讨论】：

不知道。也非常感谢你！ :-)
有关 CSS 特性的更多信息，请查看 this article 以获得出色的解释。

【解决方案3】：

任何你不需要的伪类，干脆不要定义它

注意：1. 遵循 a 的顺序以确保样式适用于链接
2. 如果不使用{visited, focus, active}，则不必指定。

a,
a:link {
  color: fontColor(color2);
  text-decoration-color: fontColor(color4) !important;
  text-underline-position: under; // to increase the gap between text and underlining in CSS
  text-decoration-thickness: 2px;
  font-weight: 600;
}

a:hover {
  text-decoration-color: fontColor(color2) !important;
}

// 注意你使用的是 SCSS (fontColor(color2))

【讨论】：