How to set CSS hover effect on parent and child elements

Question

Suppose I have the following code:

<div class="wrapper"> <div class="title"></div> <div></div> </div> <div class="wrapper"> <div class="title"></div> <div></div> </div> <div class="wrapper"> <div class="title"></div> <div></div> </div> 

When I hover over the wrapper, I want the child div header to change the background color. Can I do this in pure CSS. In JS, I know how to do this. I am wondering if there is a pure CSS method for this?

thanks

Answer 1

Yes you can do it. It's simple:

 .wrapper:hover .title { background-color: #f00; } 

EDIT:
Note that IE6 recognizes :hover only a -elements, so this will not work - but I hope you don't have to bother with this lousy old thing.

Answer 2

how about that?

 .wrapper:hover .title { background-color: blue; }