[解決済み] CSS の hover イベントで、他の div のスタイルを変更できますか？重複

質問

idが"a"のdivやclassにカーソルを合わせると、idが"b"のdivやclassの背景色を変更させることはできますか。

解決方法を教えてください。

はい、それは可能ですが、以下の場合に限ります。 #b の後に #a をHTMLで表示します。

もし #b の直後に #a : http://jsfiddle.net/u7tYE/

#a:hover + #b {
    background: #ccc
}

<div id="a">Div A</div>
<div id="b">Div B</div>

これは 隣接兄弟コンビネータ ( + ).

の間に他の要素がある場合 #a と #b は、これを使うことができます。 http://jsfiddle.net/u7tYE/1/

#a:hover ~ #b {
    background: #ccc
}

<div id="a">Div A</div>
<div>random other elements</div>
<div>random other elements</div>
<div>random other elements</div>
<div id="b">Div B</div>

これは 一般的な兄弟コンビネータ ( ~ ).

どちらも + と ~ すべてのモダンブラウザとIE7+で動作します。

もし #b の子孫である。 #a を使用すると、単純に #a:hover #b .

代替案：純粋なCSSを使用して、2番目の要素を1番目の要素の前に配置することでこれを行うことができます。最初の div はマークアップが先ですが、2 番目の div よりも右側または下に配置されます。これは、前の兄弟であるかのように動作します。