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

Question

我正在使用 React JS + Bootstrap，我想知道如何定义 CSS class 到 html hyperlink 元素在某种程度上，无论它处于什么状态（link、悬停、活动等），它的颜色都不会改变。

例如，我有这个 classes:

:root{
  --black: #3B424C;
  --white: #FFFFFF;
}

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

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

.custom-hyperlink:link{
  text-decoration: none;
  font-weight: bold;
}

所以，当我想创建一个黑色的 hyperlink 时，我会：

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

当我想创建一个白色的时，我输入“白色”而不是“黑色”，但是，无论我想要哪种颜色，当我将鼠标悬停在 hyperlink 上时，它会变成蓝色

希望你能帮助我，在此先感谢！

Answer 1

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

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

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

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

Can I set a variable color for a link in CSS?

html

css

colors

hyperlink

hover