Apply hover effect on child element

Question

I have a toolbar(for a text editor) which has the following HTML :

        <table class="toolbar" cellspacing="0" cellpadding="0" border="0" style="width:602px;">
             <tbody>
                 <tr>
                  <td>

    <img id="bold" class="bold" width="20" height="20" border="0"  onclick="toolbarjewels(this) ; formatText(this.id);" title="Bold"  src="/assets/img_trans.gif"/>
                  </td>
<td>
...
</td>

        </tbody>
        </table>

My css is like :

.bold{
background: url(/assets/question_add_sprites.png)  -12px -20px  ;
width: 18px;
height: 24px;
padding-right : 0px ; 
cursor : pointer ; 
align:middle; 
}

/*For hover */
.toolbar td:hover{
   background-color : #DCDCDC ; 
}
.bold:hover{
   background: #DCDCDC url(/assets/question_add_sprites.png) -63px -19px ;
}

In this implementation the <td> which has the image in the center goes grey(#DCDCDC) from it's normal colour (white) when the mouse hovers over. However, the image hover class is not triggered unless the mouse is exactly over the image. Is there a way to apply hover rule for the child element (image in this case) as well?

This is the expected behaviour :

Without hover : background : white image : grey

With hover : background : grey image : white

Answer 1

If I understand your question, you want this :

.toolbar td:hover {
   background-color : #DCDCDC ; 
}
.toolbar td:hover .bold{
   background: #DCDCDC url(/assets/question_add_sprites.png) -63px -19px ;
}

When the mouse hover the td , then the background of the .bold image changes.