如何解决已访问链接悬停时短暂显示原始颜色的问题？

问题根源在于浏览器对:visited伪类的安全限制，以及过渡属性未在所有状态中正确生效。触发hover/active或移出悬停时，浏览器会优先用a标签的默认样式作为过渡起始值，而非:visited的样式，导致出现跳变。

可以通过以下两种方法解决：

方法1：为所有伪类明确添加过渡属性 #

把过渡属性复制到每个伪类中，确保每个状态切换时都能读取到过渡规则：

a {
    background-color: green;
    color: black;
    text-decoration: none;
    transition: background-color 200ms;
    will-change: background-color;
}
a:visited {
    background-color: #5dca48;
    transition: background-color 200ms;
    will-change: background-color;
}

a:hover {
    background-color: yellow;
    transition: background-color 200ms;
    will-change: background-color;
}

a:active {
    background-color: yellowgreen;
    transition: background-color 200ms;
    will-change: background-color;
}

方法2：使用CSS变量统一管理颜色（更简洁） #

用CSS变量定义各状态的背景色，确保浏览器能正确识别状态间的颜色变化并应用过渡：

:root {
    --link-bg: green;
    --visited-bg: #5dca48;
    --hover-bg: yellow;
    --active-bg: yellowgreen;
}

a {
    background-color: var(--link-bg);
    color: black;
    text-decoration: none;
    transition: background-color 200ms;
    will-change: background-color;
}

a:visited {
    background-color: var(--visited-bg);
}

a:hover {
    background-color: var(--hover-bg);
}

a:active {
    background-color: var(--active-bg);
}

说明 #

• 避免用all作为过渡属性，明确指定background-color能减少不必要的性能开销，同时避免其他属性的意外过渡。
• 浏览器对:visited有严格限制（防止通过脚本读取用户浏览记录），使用CSS变量能让过渡逻辑更稳定，确保状态切换时的颜色值被正确识别。

内容的提问来源于stack exchange，提问作者alicode1111