忽略CSS顏色屬性

Question

我希望文本框及其鏈接的顏色在懸停時反轉。但是會發生的是，首先盒子的背景顏色反轉，只有當光標在文本（鏈接）上移動時，文本顏色纔會反轉。

#nav span:hover { 
    color:white; /* ignored ! */ 
    background-color:#687078; 
} 

顯然，color:white被忽略（因爲：懸停的優先級？）
我怎麼能同時改變兩種顏色？

---

完整的HTML和CSS：http://jsfiddle.net/stevenvh/LvgRJ/4/

Answer 1

使用

#nav span a { color:#214275; text-decoration:none; } 
#nav span:hover { background-color:#687078; } 
#nav span:hover a { color:white; } 

Demo

與您的代碼的問題是，當你將鼠標懸停<span>但不是<a>，則只適用#nav span:hover規則，但不適用#nav span a:hover。您必須改用#nav span:hover a。

題外話：考慮使用童年選擇器（>）而不是後代，這會慢一點。

Answer 2

使用選擇器：

#nav span:hover, 
#nav span:hover a { 
    color: white; 
} 

導致徘徊span元素時被着色的a;或：

#nav span a { 
    color: inherit; 
} 

這將導致a從它的父/祖先繼承它的顏色。