Wie überschreiben Schaltfläche nicht-Hover-Status Farbe zu Grau, aber wenn Hover-Schaltfläche zeigen die Farbe (mit CSS-Framework)

Question

Ich verwende semantische, sie haben Farben Klasse wie folgt.

Es zeigt eine rote Schaltfläche mit anderen Schatten, wenn: aktiv: Hover und Standardzustand.

Allerdings möchte ich die Klassenfarben nur anzeigen auf: Hover-Status; Wenn nicht, wird die Schaltfläche überschrieben grau Farbe.

Kann dies durch Hinzufügen einer CSS-Klasse erfolgen?

Anmerkung: Ich habe nicht jede semantische Farben Klasse duplizieren wollen dieses Ergebnis zu erzielen

Answer 1

Beispiel:

.button:not(:hover) { 
 
    color: white; 
 
    background: green; 
 
} 
 

 
.button { 
 
    background: red; 
 
    color: #fff; 
 
}

<button class='ui red button'> hover me to change red </button>

Answer 2

Schaltfläche An der nicht-Hover-Zustand Farbe überschreiben this-

button.red.button{background-color:grey;background:gray;} 

Answer 3

Ja, grau, versuchen du kannst es schaffen. Fügen Sie der Schaltfläche eine weitere Klasse hinzu.

<button class='ui red button hover-red'> hover me to change red </button> 

.hover-red{ 
background: #ddd !important; 
} 

.hover-red:hover{ 
background-color: #E75859 !important; 
color: #FFFFFF; 
} 

http://jsfiddle.net/rp0cd0me/