Как переписать цветной цвет кнопки кнопки на серый, но когда кнопка наведения показывает цвет (с рамкой css)

Question

Я использую семантику, у них есть класс цветов, как показано ниже.

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

Он показывает красную кнопку с различным оттенком, когда: active: наведение и состояние по умолчанию.

Однако я хочу, чтобы цвета классов отображались только на: состоянии hover; если не нависание кнопки переписывается серый цвет.

Можно ли это сделать, добавив один класс CSS?

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

Answer 1

Пример:

.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

ерезаписи баттона без парения состояния цвета на сером, попробуйте this-

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

Answer 3

Да, ты можешь это сделать. Добавьте еще один класс к кнопке.

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