CSS li a:visited 覆盖移动设备上的悬停状态

Question

我在访问链接和悬停状态时遇到问题。我网站底部的社交媒体图标有一个：列表悬停状态设置为红色。用户访问链接后，它仍然是白色的。在移动设备上，因为悬停状态并不是真正的东西，所以没有红色。但是，当单击其中一个社交图标时，它仍然是红色的。我尝试将访问的颜色设置为白色，这消除了图标剩余红色问题。但是，回到桌面设备意味着悬停状态停止工作。

这是代码：

footer li a:hover {
color: #e91d26;
}

footer li a:active {
color: #fff;
}

footer li a:link {
color: #fff;
}

footer li a:visited {
color: #fff;
}

附上一张图片，显示移动设备上的问题，页脚 li avisited 已被注释掉。

a:visited white commented out

Answer 1

这只是一个CSS Specificity 问题。

要解决此问题，只需将您的 footer li a:hover 声明移至底部 footer li a:visited 下方。

像这样：

footer li a:active {
    color: #fff;
}

footer li a:link {
    color: #fff;
}

footer li a:visited {
    color: #fff;
}

/* Move : hover down here.. */
footer li a:hover {
    color: #e91d26;
}

或者您可以在:hover 声明中将!important 添加到color 属性中，但这更像是一种技巧，不建议这样做..

/* not suggested... but would work */

footer li a:hover {
    color: #e91d26; !important;
}