爲自定義Kendo UI網格按鈕添加「活動」顏色

Question

我想向Kendo UI網格添加一個色彩豐富的自定義按鈕。

它的工作原理除了活躍狀態很好。背景顏色不會被覆蓋。

HTML：

<a class="k-button k-button-icontext k-grid-details" href="#"> 
    <span class=" "></span> 
Details</a> 

CSS：

.k-grid-details { 
    color: #fff; 
    padding-left: 10px; 
    padding-right: 10px; 
    width: 50px; 
    border-color: #003399; 
    background-color: #003399; 
    background: linear-gradient(#003399, #000167); 
} 

    .k-grid-details:hover { 
     border-color: #003399; 
     color: #fff; 
     background-color: #003399; 
    } 

    .k-grid-details .k-state-active, 
    .k-grid-details:active { 
     background-color: #003399; 
    } 

什麼可能會丟失？

Answer 1

看這個FIDDLE

您的問題是，你正在使用background + background-color在.k-grid-details 但是當你將鼠標懸停和活躍的.k-grid-details只是做background-color，因此background（其中包含linear-gradient(#003399, #000167)）停留在懸停和活動狀態。所以你必須加入背景顏色和背景，使得它的簡寫，是這樣的：

background: #039 linear-gradient(#003399, #000167)

你可以看到更多的背景速記HERE

然後在懸停和活躍狀態只是背景顏色後，您的線性漸變設置沒有，像這樣：

.k-grid-details:hover { 
     background: #ff0 none; 
} 

.k-grid-details:active { 
     background: #f00 none; 
}