CSS懸停選擇器不工作

Question

我遇到了一個奇怪的CSS問題。

這可能是因爲我不使用類，而是直接使用標籤的名稱，但我想知道問題是什麼，所以我不重複。

我的HTML是這樣的：

<div class='container'> 
    <div class='top'> 
     <a href='href.com'>hover here..</a> 
    </div> 
    <div class='bottom'> 
     <a>..and this should change</a> 
    </div> 
</div> 

什麼，我試圖用CSS：

.top a:hover .bottom a 
{ 
    color:#f00; /* does not work */ 
} 
.top a:hover .container 
{ 
    background-color:#f00; /* does not work */ 
} 
.top a:hover 
{ 
    color:#f00; /* works */ 
} 

那麼，爲什麼在其他元素調用不工作？

還是因爲我是從小孩打電話給父母的？

如果是這樣，我該如何使它工作？

謝謝！

Answer 1

你的CSS是錯誤的，你忘了逗號：

.top a:hover, .bottom a:hover 
{ 
    color:#f00; 
} 
.top a:hover, .container:hover /* Comma was missing here */ 
{ 
    background-color:#f00; 
} 

Answer 2

晚了一年，但任何人誰在這裏跌倒，請使用以下的CSS：

.top:hover ~ .bottom {color: red;} 

http://jsfiddle.net/Xb62A/