我是新来的,我有一个可能很简单的问题,但谷歌搜索了一段时间后我找不到答案。
我的浏览器游戏中有一些绿色,带有白色文字的按钮。当我将鼠标悬停在它们上面时,我用CSS更改了rgba,绿色变得更透明:
#oneOfTheButtons:hover {
background: rgba(76, 175, 80, 0.7) !important;
}
白色文本保持不变。如果玩家升级,我也有一些改变颜色的Javascript:
document.getElementById("oneOfTheButtons").style.background = "rgba(77, 173, 173, 1)";
然后按钮是蓝色的。但问题是悬停仍然使它们透明绿色,但我希望它们是透明的蓝色。我有20个不同颜色的级别。
这有什么简单的解决方案吗?
这可以通过许多不同的方式完成,但您可以使用css variables这样做:
let green = true;
function toggleColor() {
if (green) {
document.body.style.setProperty('--button-bg-color', '77, 173, 173');
} else {
document.body.style.setProperty('--button-bg-color', '76, 175, 80');
}
green = !green;
}
:root {
--button-bg-color: 76, 175, 80;
}
button {
background: rgba(var(--button-bg-color), 1);
}
button:hover {
background: rgba(var(--button-bg-color), 0.7);
}
<button onclick="toggleColor()">Toggle hover color!</button>
你可以使用以下css
.green:hover {
background: rgba(76, 175, 80, 0.7);
}
.green {
background: rgba(76, 175, 80, 1);
}
.blue {
background: rgba(77, 173, 173, 1);
}
.blue:hover {
background: rgba(77, 173, 173, 0.7);
}
以下是js
document.getElementById("oneOfTheButtons").className = "blue";