親のホバーで子divのフォントの色を変更する

Question

私は質問があり、可能かどうかは分かりませんが、質問してみると思いました。

は、私は3人のdivの持っていたと言う：親のdivがあるときparent_div内のすべてのテキストを黒に設定されている場合

<div id="parent_div"> 

    <div id="child_div_1">Blue</div> 

    <div id="child_div_2">Red</div> 

</div> 

を、どのように私は、それぞれ青と赤にchild_div_1とchild_div_2変更フォントの色になるだろう終わった？

これはちょっと混乱しますが、これはCSSでのみ行うのが望ましい方法ですか？

Answer 1

#parent_div:hover #child_div_1 { 
    color: blue; 
} 
#parent_div:hover #child_div_2 { 
    color: red; 
} 

Answer 2

ただ、親の:hover状態に基づいて、関連する子要素ターゲット：

/* defaults */ 
#parent_div div { 
    color: #000; /* or whatever... */ 
} 

/* hover rules */ 

#parent_div:hover #child_div_1 { 
    color: blue; 
} 
#parent_div:hover #child_div_2 { 
    color: red; 
} 

JS Fiddle demoを。

Answer 3

は親要素に:hover疑似クラスを使用します。

デモ：http://jsfiddle.net/Guffa/M3WsW/