我可以为CSS中的链接设置一个变量颜色吗?

Question

我正在使用React JS + Bootstrap，我想知道如何以某种方式定义html超链接元素的CSS类，无论它有什么状态(链接，悬停，活动等)，它的颜色都不会改变。

例如，我有这样的类:

:root{
--black: #3B424C;
--white: #FFFFFF;
}
.black{
color: var(--black);
}
.white{
color: var(--white);
}
.custom-hyperlink:link{
text-decoration: none;
font-weight: bold;
}

所以，当我想创建一个黑色的超链接时，我输入:

<a className="custom-hyperlink black" target="_blank" href="#">Example text</a>

当我想创建一个白色的，我输入"white"而不是"黑色"，但是，无论我想要什么颜色，当我悬停超链接时，它会变成蓝色

希望你能帮助我，提前感谢!

Answer 1

你必须定义悬停时的颜色。蓝色是浏览器的默认颜色。所以当你想在悬停时使用相同的颜色时它会是:

.black,
.black:hover {
color: var(--black);
}
.white,
.white:hover {
color: var(--white);
}