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

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;
}