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

Question

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

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

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

白色文本保持不变。如果玩家升级，我还有一些 Javascript 会改变颜色：

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

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

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

Answer 1

这可以通过多种不同的方式完成，但您可以使用 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>

Answer 2

你可以使用下面的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";