在不添加新類的情況下更改css中的顏色？

Question

我有一個名爲.item的高斯，它非常複雜..我只想改變懸停顏色，而不是將所有類名拷貝到另一個名字上，只是爲了改變懸停顏色。將000000顏色更改爲FC0000的簡單方法是什麼？

.item-test a.hover .thumb { 
    border-bottom-color: #000000; 
    border-bottom-style: solid; 
    border-bottom-width: 5px; 
    border-left-color-ltr-source: physical; 
    border-left-color-rtl-source: physical; 
    border-left-color-value: #000000; 
    border-left-style-ltr-source: physical; 
    border-left-style-rtl-source: physical; 
    border-left-style-value: solid; 
    border-left-width-ltr-source: physical; 
    border-left-width-rtl-source: physical; 
    border-left-width-value: 5px; 
    border-right-color-ltr-source: physical; 
    border-right-color-rtl-source: physical; 
    border-right-color-value: #000000; 
    border-right-style-ltr-source: physical; 
    border-right-style-rtl-source: physical; 
    border-right-style-value: solid; 
    border-right-width-ltr-source: physical; 
    border-right-width-rtl-source: physical; 
    border-right-width-value: 5px; 
    border-top-color: #000000; 
    border-top-style: solid; 
    border-top-width: 5px; 
    overflow-x: hidden; 
    overflow-y: hidden; 
} 

Answer 1

只需添加一個新的CSS定義：

.item-test a.hover .thumb:hover { 
    border-color: #FC0000; 
} 

的選擇在這裏使用，.item-test a.hover .thumb:hover比上面使用（因爲它有一個額外的僞類），因此它會在一個更具體的優先於它。見CSS 2 – The Cascade。

Answer 2

這可能是我見過的最有效的CSS ...

.item-test a.hover .thumb{ 
    border: 5px solid #000; 
    overflow:hidden; 
} 

會做同樣的事情。

要懸停的改變，你會只是做：

.item-test a.hover .thumb:hover{ 
    border-color:#FC0000; 
} 

然而，一些瀏覽器不支持：懸停僞類，除非它是一個阿克爾。幸運的是，你似乎有一個嵌套在achor中的.thumb，所以你應該這樣做，以確保完全兼容：

.item-test a:hover .thumb:hover{ 
    border-color:#FC0000; 
}