javascript - 使用 "Hover color"在不在 CSS 中的每个按钮标签上声明，在悬停时更改按钮字体颜色

Question

这不是一个重复的问题 - 我不想简单地更改 CSS 中的字体颜色。

我的问题:

我有带颜色的产品。蓝色、红色、绿色、黄色、紫色 - 任何颜色。

我有一个相同颜色的盒子 -

在这个盒子里面我有一个按钮“购买”

我可以动态创建此按钮 - 使用与框相同的颜色。

如果框是蓝色的 - 按钮是蓝色的，带有白色边框和白色字体颜色。

如果框是红色的 - 按钮是红色的，带有白色边框和白色字体颜色。

CSS(反向按钮):

.btn-inv {
    color: #ffffff !important;
    background-color: transparent;   
    border: 1px #ffffff solid;
    box-shadow: none;
}

但悬停

.btn-inv:hover {
    color: #000000;
    background-color: #ffffff;
    border: 1px #ffffff solid;
}

按钮变为白色 - 字体颜色变为黑色。

问题:我需要与方框颜色相同的字体颜色 - 如果方框是蓝色，则字体颜色是蓝色。

当然 - 如果我更改 CSS - 我可以做到这一点。

但我需要一种动态的方式来做到这一点 - 因为我无法创建所有按钮颜色..

使用“style”的东西:

<a href="#" class="btn btn-inv btn-lg" style=".HOVER: color: #4a62ab">BUY</a>

或标签内带有颜色的任何其他想法。因为有了这个我可以简单地发送正确的颜色信息并动态创建按钮。

如果我有 80 种颜色 - 我可以对所有颜色使用相同的 CSS - 只需通过 ASP 发送正确的颜色即可动态完成按钮。

而且我不需要为此创建 80 个 CSS 按钮。

Answer 1

像这样考虑 CSS 变量:

a.btn {
 padding:0 10px;
 color:#000;
 border:1px solid;
}
a.btn:hover {
  color:var(--h, yellow);
}

<a href="#" class="btn btn-inv btn-lg" style="--h: #4a62ab">BUY</a>
<a href="#" class="btn btn-inv btn-lg" style="--h: red">BUY</a>
<a href="#" class="btn btn-inv btn-lg" style="--h: green">BUY</a>
<a href="#" class="btn btn-inv btn-lg" style="--h: #4a00fb">BUY</a>
<a href="#" class="btn btn-inv btn-lg">BUY</a> <!-- this one will get the default color (yellow) -->