如何覆蓋按鈕的非懸停狀態顏色爲灰色，但懸停按鈕顯示顏色時（使用CSS框架）

Question

我使用語義，它們的顏色類如下所示。

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

它顯示一個不同陰影的紅色按鈕：active：懸停和默認狀態。

但是，我希望類顏色只顯示：懸停狀態; 當不懸停按鈕被覆蓋灰色顏色。

這可以通過添加一個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

要覆蓋按鈕的非懸停狀態的顏色以灰色，嘗試這個 -

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/