Изменить прозрачность фона кнопки CSS JavaScript - PullRequest
Новая
       35

Изменить прозрачность фона кнопки CSS JavaScript

0 голосов
/ 05 сентября 2018

Я новичок здесь, и у меня есть вопрос, который может быть простым, но я просто не мог найти ответ после поиска в Google некоторое время.

У меня в браузере есть несколько кнопок зеленого цвета с белым текстом. Когда я наводю на них курсор, я изменяю rgba с помощью CSS, и зеленый становится более прозрачным: 

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

Белый текст остается прежним. У меня также есть некоторый Javascript, который меняет цвет, если игрок поднимается на уровень: 

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

Тогда кнопки синие. Но проблема в том, что при наведении они все еще становятся прозрачными зелеными, но я хочу, чтобы они были прозрачными синими. У меня есть еще 20 уровней с разными цветами.

Есть ли простое решение для этого?

Ответы [ 2 ]

0 голосов
/ 05 сентября 2018

Вы можете использовать следующие 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";
0 голосов
/ 05 сентября 2018

Это можно сделать разными способами, но вы можете сделать это с помощью переменных css , например: 

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