элементы специально для: hover переопределяя эквивалентный класс для: active

У меня есть код, чтобы иметь фон с цветом шрифта, назначенным одному классу, а затем есть отдельные классы для изменения цвета на: hover или: active, но состояние: active не срабатывает, пока я не удалю определенный класс: hover.CODEPEN

HTML:

<div class="backgroundRed backgroundGreenHover backgroundBlueActive" style="width: 100px; height: 100px;"></div>

CSS:

.backgroundRed, .backgroundRedHover:hover, .backgroundRedActive:active{background:red;}
    .backgroundGreen, .backgroundGreenHover:hover, .backgroundGreenActive:active{background:green;}
    .backgroundBlue, .backgroundBlueHover:hover, .backgroundBlueActive:active{background:blue;}

Ответы на вопрос(1)

Ваш ответ на вопрос