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/