CSS背景顏色優先級

我正在改變jQuery上懸停的表格行的顏色，我注意到在下面的例子中我得到了不同的結果。CSS背景顏色優先級

的CSS如下：

.normalcolor { 
    background-color: #dedede; 
} 
.reddishcolor { 
    background-color: #ffc59c; 
} 
.hovercolor { 
    background-color: #f1e1c0; 
}

現在，我做的jQuery懸停效果，使用此代碼：

$("table.withhover tr").hover(function(){ 
    $(this).addClass("hovercolor"); 
}, function(){ 
    $(this).removeClass("hovercolor"); 
});

奇怪的是，當我將鼠標懸停在一個行class="normalcolor"，背景顏色更改爲.hovercolor。但是，當我與class="reddishcolor"盤旋連續時，背景顏色不會改變。

這是正常的嗎？如果是，爲什麼？它與顏色有什麼關係？

謝謝！

來源

2010-08-14 Alex

也許你有table.withhover問題？你能給我們一個在jsbin.com上的實例嗎？ – Sotiris 2010-08-14 13:28:51

如果你選中這個jsfiddle：http://jsfiddle.net/wyZem/，你會看到這個簡單的例子就像你描述的那樣。另外請注意，您可以使用toggleClass方法清理懸停事件處理程序。 – Pat 2010-08-14 13:33:35

@Sotiris問題出在CSS聲明中。看到接受的答案。不管怎麼說，還是要謝謝你！ – Alex 2010-08-14 13:43:46

您是否按照指定的順序指定了CSS類，還是最後指定的.reddishcolor類？

當多個樣式應用於元素時，將使用最具體的規則。如果規則同樣具體（如您的情況），則使用最新的規則。

如果你不能改變的CSS規則的順序，你可以通過指定的元素名稱也使懸停類更具體的，例如：

tr.hovercolor { 
    background-color: #f1e1c0; 
}

來源

2010-08-14 13:31:28 Guffa

就是這樣。謝謝！ – Alex 2010-08-14 13:42:50

你必須刪除舊的CSS類它定義了默認的顏色，然後添加新的類，它定義了懸停顏色：

$().hover(function() 
{ 
    $(this).removeClass("default-color-class").addClass("hover-color-class"); 
});

...或者你可以玩的!important CSS關鍵詞，讓你的懸停顏色類優先於連接其他類到一個元素：

.hover-state { color: #fff !important; }

注：!important關鍵字不支持IE6和Firefox 1.x的

...或者你可以在你的懸停顏色類的範圍界定更加具體：

.default-state { ... }; 
table .hover-state { ... }; /* more specific rules override less specific ones */

來源

2010-08-14 13:32:06 roosteronacid

CSS背景顏色優先級

回答

相關問題