如何在悬停时更改 link 颜色并将其改回（使用 per-link 样式）？

Question

我网站上的每个 link 都有独特的颜色，在每个 <a> 标签的 style 参数中定义。我希望能够将页面上每个 link 的背景颜色更改为浅绿色，并将悬停时的文本颜色更改为白色。但是，由于每个 link 的单独颜色，文本颜色不会更改并被覆盖。我该如何解决这个问题？

这是我的代码：

a {
  color: black;
}

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

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

编辑：澄清一下，我希望 links 保持原来的颜色，但我希望它们在悬停时变为白色，在非悬停时变回白色。高亮颜色更改已经生效。

Answer 1

您可以使用 !important 属性以覆盖内联样式

a {
  color: black;
}

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

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

Answer 2

使用 !important 属性覆盖所有其他声明：

a {
  color: black;
}

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

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

Answer 3

使用 CSS 变量而不是内联颜色，这样您就不必处理 !important 和特异性问题：

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

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

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

如何在悬停时更改 link 颜色并将其改回（使用 per-link 样式）？

How to change link color on hover and change it back (with per-link styling)?

html

css

highlight