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 */
}

那么为什么对其他元素的调用不起作用？

还是因为我在给 child 打电话？

如果是这样，我怎样才能让它发挥作用？

谢谢!

Answer 1

晚了一年，但对于任何在这里绊倒的人，请使用以下作为 css:

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

http://jsfiddle.net/Xb62A/