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

Posted 2023-03-25

【中文标题】我可以为 CSS 中的链接设置可变颜色吗？

【英文标题】：Can I set a variable color for a link in CSS?

【发布时间】：2021-10-26 20:46:04

【问题描述】：

我正在使用 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>

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

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

【参考方案1】：

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

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


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