如何更改悬停时的链接颜色并将其更改回(使用每个链接样式)

Question

我的网站上的每个链接都有一个唯一的颜色，该颜色在每个<a>标签的style参数中定义。我希望能够将页面上每个链接的背景颜色更改为浅绿色，并在悬停时将文本颜色更改为白色。但是，由于每个链接的颜色不同，文本颜色不会改变，并且会被覆盖。我该怎么绕过这个？

这是我的代码：

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>

编辑：为了澄清，我希望链接保持原样，但我希望它们在悬停时变为白色，在非悬停时变回白色。高亮显示颜色更改已起作用。

Answer 1

使用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>

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

使用!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>