Question

When an element with the class .parent is hovered over, it locates child elements with the class .child and applies the CSS to them.

Here is jsFiddle

Is it possible to achieve this effect purely with CSS?

html:

<div class="parent" style="background:red;margin:20px;padding:20px;">
    <div class="child" style="background:blue;margin:20px;padding:20px;"></div>
</div>

<div class="parent" style="background:red;margin:20px;padding:20px;">
    <div class="child" style="background:blue;margin:20px;padding:20px;"></div>
</div>​

jQuery:

$('.parent').hover(
  function () {
    $(this).find('.child').css('background','yellow');
  }, 
  function () {
    $(this).find('.child').css('background','blue');
  }
);​

Answer 1

Remove the inline styles and put the following in a stylesheet:

/* CSS */
.parent { background: red; margin: 20px; padding: 20px; }
.child {background blue; margin: 20px; padding: 20px;}
.parent:hover > .child { background: yellow; }