更改悬停时的按钮字体颜色，在每个按钮标签上声明的“悬停颜色”不在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 Button。

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