:hover demo

<style>
body {
margin: 100px;
}

div {
border: 3px solid #333;
}

#parent1, #parent2, #parent3 {
display: inline-block;
position: relative;
width: 200px;
background-color: #55f;
padding: 10px;
}

#parent1 div, #parent2 div, #parent3 div {
background-color: #0f0;
height: 30px;
margin-top: 50px;
padding: 5px;
}

#parent1:hover {
background-color: #f00;
}

#parent2 div:hover {
background-color: #f00;
}

#parent3:hover div {
background-color: #f00;
}
</style>

<div id="parent1">
<strong>#parent1:hover</strong>
<br /><br />
Affects the style of the parent when you hover over the parent (or anything in the parent).
<div>Child</div>
</div>

<div id="parent2">
<strong>#parent2 div:hover</strong>
<br /><br />
Affects the style of the child when you hover over the child.
<div>Child</div>
</div>

<div id="parent3">
<strong>#parent3:hover div</strong>
<br /><br />
Affects the style of the child when you hover over the parent (or anything in the parent).
<div>Child</div>
</div>