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

Question

我在访问 link 和悬停状态时遇到问题。我网站底部的社交媒体图标 a:list 悬停状态设置为红色。用户访问link后，它保持白色。在移动设备上，悬停状态并不是真正的东西，没有红色。但是，当单击其中一个社交图标时，它仍然是红色的。我尝试将访问的颜色设置为白色，从而消除了图标保持红色的问题。然而，回到桌面设备意味着悬停状态停止工作。

这是代码：

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

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

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

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

所附图片显示了移动设备上的问题，已访问的页脚已被注释掉。

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;
}

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

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

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

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

CSS li a:visited overriding hover state on mobile

css

mobile

desktop

visited

hover