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

Question

質問があり、それが可能かどうかはわかりませんが、聞いてみようと思いました。

私が3つのdivを持っていたとしましょう：

<div id="parent_div">

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

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

</div>

parent_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フィドルデモ。

Answer 3

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

#parent_div { color: black; }

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

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