将鼠标悬停时的按钮字体颜色更改为每个按钮标签（不在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，我可以做到这一点。

但我需要一种动态的方式来实现这一点，因为我无法创建所有的按钮颜色。。

使用“风格”的东西：

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

或者标签上有颜色的其他创意。因为有了它，我可以简单地发送正确的颜色信息，并动态创建按钮。

如果我有80种颜色——我可以为所有人使用相同的CSS——并且只需通过ASP发送正确的按钮来动态完成。

我不需要仅仅因为这个就创建80个CSS按钮。

Answer 1

考虑CSS变量如下：

css prettyprint-override">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) -->