Question

I have two divs floated next to one another:

<div id="parent">
    <div id="child_1" style="float:left"> content </div>
    <div id="child_2" style="float:left"> content </div>
    <div style="clear:both"></div>
</div>

When either div is hovered over, I’d like to change the colors of both divs (to something different). Say, one yellow, the other red. Is there a way to do this? I put the div id="parent" in there thinking that I could do something when that is hovered over; change the divs with this id (or class) to this color within the parent. But I don’t really know if this is possible. Also, jquery hover events always seem very delayed with respect to css, so I am trying to avoid using a script. Thanks much!

Answer 1

div#parent:hover div#child_1 {
  color: red;
}

div#parent:hover div#child_2 {
  color: yellow;
}