更改按钮css javascript的背景透明度

我是新来的，我有一个问题可能很简单，但我只是在谷歌搜索了一段时间后找不到答案

我的浏览器游戏中有一些按钮是绿色的，带有白色文本。当我将鼠标悬停在它们上方时，我使用CSS更改rgba，绿色变得更加透明：

#oneOfTheButtons:hover {
  background: rgba(76, 175, 80, 0.7) !important;
}

白色文本保持不变。我还有一些Javascript，可以在玩家升级时更改颜色：

document.getElementById("oneOfTheButtons").style.background = "rgba(77, 173, 173, 1)";

然后按钮是蓝色的。但问题是，悬停仍然使它们变成透明的绿色，但我希望它们是透明的蓝色。我还有20个不同颜色的关卡

---

有什么简单的解决方法吗？

这可以用很多不同的方法来实现，但你可以这样做：

let green=true；
函数toggleColor（）{
如果（绿色）{
document.body.style.setProperty（'--button bg color'，'77173173'）；
}否则{
document.body.style.setProperty（'--button bg color'，'7617580'）；
}
绿色=！绿色；
}

：根目录{
--按钮背景颜色：76、175、80；
}
钮扣{
背景：rgba（var（--按钮背景色），1）；
}
按钮：悬停{
背景：rgba（var（--按钮背景色），0.7）；
}

---

切换悬停颜色您可以使用以下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";

可能重复您是否尝试更改该按钮类并已设置不同类的样式？您还可以使用css不透明属性而不是rgba（）