如何实现链接悬停变色后恢复，且支持单链接自定义样式？

问题原因 #

行内style属性的CSS优先级远高于样式表中的标签选择器，所以你定义的a:hover文字颜色规则，被<a>标签上单独设置的行内颜色覆盖了，只有不需要覆盖行内样式的背景色规则能正常生效。

解决方法 #

方法1：用!important提升优先级（无需修改HTML，改造成本最低） #

直接给hover状态的颜色规则加!important，强制让它的优先级高于行内样式：

a {
  color: black;
}

a:hover {
  background-color: aqua;
  color: white !important;
}

这个方案完全不需要改动现有HTML代码，非悬停状态下链接会保留原本的自定义颜色，悬停时会正常显示白色文字+水色背景，完全符合你的需求。

方法2：用CSS变量实现（更规范，无!important） #

如果你不想在代码里用!important，可以把行内的颜色定义改成CSS变量，逻辑更清晰，后续维护也更方便：
首先修改HTML里的行内样式，把颜色赋值给自定义变量：

<a href=about style="--link-color:cyan">About</a><br>
<a href=how style="--link-color:magenta">How this site was made</a><br>
<a href=changelog style="--link-color:goldenrod">Upcoming Changes & Changelog</a><br>

再修改CSS规则，默认状态读取变量，hover状态直接覆盖颜色即可：

a {
  color: var(--link-color, black);
}

a:hover {
  background-color: aqua;
  color: white;
}

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