使用“悬停颜色"更改悬停按钮的字体颜色在每个按钮标签上声明的不在CSS中 [英] Change Button Font Color on Hover With "Hover color" declared on each button tag not in CSS

问题描述

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

It's not a duplicate question - I don't want to simply change the font color in CSS.

我的问题:

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

I have products with colors. Blue, Red, Green, Yellow, Purple - any kind of color.

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

I have a box with the same color -

在此框内，我有一个购买"按钮

And Inside this box I have a button "BUY"

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

I can create this button dynamic - with the same color of the box.

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

If the box is blue - the button is blue with white border and white font color.

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

If the box is red - the button is red with white border and white font color.

CSS(反向按钮):

the CSS (Inverse Button):

.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;
}

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

The button goes to white - and the font color to black.

问题:我需要在框的同一颜色中使用字体颜色-如果框为蓝色，则字体颜色为蓝色.

THE ISSUE: I NEED THE FONT COLOR IN THE SAME COLOR OF THE BOX - if the box is blue, the font color is blue.

当然-如果更改CSS-我可以做到.

Of Course - If I change the CSS - I can do this.

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

But I need a dynamic way to do this - because I cannot create ALL buttons colors..

使用样式"的东西:

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

或标签中带有颜色的其他任何意识形态.因为这样我可以简单地发送正确的颜色信息并动态创建按钮.

or anyother ideia with the color inside the tag. because with this I can simply send the correct color information and create the button dynamically.

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

If I have 80 colors - I can use the same CSS for ALL - and just send the correct via ASP to dynamically complete the button.

正因为如此，我不需要创建80个CSS按钮.

and I don't need to create 80 CSS Buttons just because of this.

推荐答案

考虑如下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) -->

这篇关于使用“悬停颜色"更改悬停按钮的字体颜色在每个按钮标签上声明的不在CSS中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！