我可以为 CSS 中的链接设置可变颜色吗？

Question

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

例如，我有这个类：

: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>

当我想创建一个白色时，我输入“白色”而不是“黑色”，但是，无论我想要哪种颜色，当我将超链接悬停时它会变为蓝色

希望你能帮助我，提前谢谢！

Answer 1

您必须定义悬停时的颜色。蓝色是浏览器的默认设置。因此，当您在悬停时不希望使用相同的颜色时：

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

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