Question

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

我的问题：

我有颜色的产品。蓝色，红色，绿色，黄色，紫色 - 任何一种颜色。

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

在这个方框内，我有一个按钮＆＃34;购买＆＃34;

我可以创建这个动态按钮 - 与盒子的颜色相同。

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

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

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 - 我可以这样做。

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

使用＆＃34; style＆＃34;：

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

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

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

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

Answer 1

考虑这样的CSS变量：

＆＃13;

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

＆＃13;

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

＆＃13;

悬停时更改按钮字体颜色使用＆＃34;悬停颜色＆＃34;在每个按钮标签上声明而不是在CSS中

1 个答案: