css - 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:hover ~ .bottom {color: red;}

http://jsfiddle.net/Xb62A/

Answer 2

你的css错了，你忘了逗号：

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