css - 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 a 已访问已被注释掉。

a：访问过的小白注释掉了

标签： cssmobilehoverdesktopvisited

Answer 1

这只是一个CSS 特异性问题。

要解决此问题，只需将您的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;
}

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

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

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