Ich habe Code, um einen Hintergrund mit einer Schriftfarbe zu haben, der einer Klasse zugewiesen wurde. Dann habe ich separate Klassen zum Ändern der Farbe für: hover oder: active, aber der Status: active wird erst ausgelöst, wenn ich die: hover-spezifische Klasse entferne. 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;}