Как сохранить цвет по нажатию на блок?

Question

[Артур Левенсон]

Подскажите, пожалуйста, как сделать так, чтобы по нажатию на блок цвет менял своё значение и возвращался к исходному значению если нажать на другой блок. Сделал текущую задачу с помощью псевдокласса active, но когда нажимаю на другой блок, то цвет кнопки не становится прежним

Пример кода: https://codepen.io/kiskiskit/pen/eYEmqEw

Comments

[Ankhena]

Сделал текущую задачу с помощью псевдокласса active

Не нужно путать :active и :checked.
Почитайте разницу.

И либо замените div на радио-инпуты или чекбоксы.
Либо замените их на кнопки и добавляйте класс на js.
div в любом случае не является интерактивным элементом.

transition: background 9999999s;

А это вообще сильный ход.
Почти через 116 дней цвет вернется в норму.

[Артур Левенсон]

Ankhena, спасибо за совет

Answer 1

[0xD34F]

когда нажимаю на другой блок, то цвет кнопки не становится прежним

Становится. Проявите немного терпения, вам и четырёх месяцев ждать не придётся:

transition: background 9999999s;

Правда, происходит это вовсе не по причине нажатия на другой блок - что такое псевдокласс :active вы, очевидно, не разобрались.

Cделайте скрытые радиокнопки, которые будут нажиматься через label, и стилизуйте в качестве "нажатых" элементы, расположенные после :checked.

Comments

[Артур Левенсон]

Спасибо за совет