我想在用户悬停按钮时增加按钮的背景颜色亮度。但我想这样做，无论按钮的颜色如何。在下面，您可以看到四个按钮。只有最后一个有效，因为它有:hover处理程序显式配置为黄色。
.hoverme {
display: inline-block;
padding:0px;
width:5em;
height:5em;
background-color:black;
cursor: pointer;
}
.hoverme:hover .inner {
/*
Pseudocode:
background-color-opacity: 1;
*/
}
.hoverme .inner {
margin: 0px;
padding:0px;
height: 100%;
}
.hoverme.red .inner {
background-color: rgba(255,0,0,.9);
}
.hoverme.green .inner {
background-color: rgba(0,200,0,.9);
}
.hoverme.yellow .inner {
background-color: rgba(250,240,0,.9);
}
.hoverme.yellow.works-but-not-nice:hover .inner {
background-color: rgba(250,240,0,1);
}
<div class="hoverme red"><div class="inner">text</div></div>
<div class="hoverme green"><div class="inner">text</div></div>
<div class="hoverme yellow"><div class="inner">text</div></div>
<div class="hoverme yellow works-but-not-nice"><div class="inner">this works</div></div>
所以我想改变背景颜色的不透明度，无论它是黄色、红色还是其他颜色。背景图像或内容应始终完全不透明。
无需添加更多 div 元素即可完成此操作的奖励积分。
在这种情况下，我会考虑在定义悬停时更改的不透明度值时使用 CSS 变量：
:root {
--opacity:0.8;
}
.hoverme {
display: inline-block;
padding:0px;
width:5em;
height:5em;
background-color:black;
cursor: pointer;
}
.hoverme:hover .inner {
--opacity:1;
}
.hoverme .inner {
margin: 0px;
padding:0px;
height: 100%;
}
.hoverme.red .inner {
background-color: rgba(255,0,0,var(--opacity));
}
.hoverme.green .inner {
background-color: rgba(0,200,0,var(--opacity));
}
.hoverme.yellow .inner {
background-color: rgba(250,240,0,var(--opacity));
}
<div class="hoverme red"><div class="inner">text</div></div>
<div class="hoverme green"><div class="inner">text</div></div>
<div class="hoverme yellow"><div class="inner">text</div></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
