Appliquer un effet de vol stationnaire sur l'élément enfant

Question

J'ai une barre d'outils (pour un éditeur de texte) qui a le code HTML suivant:

 <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> 

Mon css est comme:

.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 ; 
} 

Dans cette mise en œuvre du <td> qui l'image au centre devient grise (#DCDCDC) de sa couleur normale (blanche) lorsque la souris survole. Toutefois, la classe de survol de l'image n'est pas déclenchée sauf si la souris est exactement au-dessus de l'image. Existe-t-il un moyen d'appliquer également la règle hover pour l'élément enfant (image dans ce cas)?

Ceci est le comportement attendu:

Sans vol stationnaire: fond: blanc Image: gris

Avec vol stationnaire: fond: gris Image: blanc

Answer 1

Si je comprends bien votre question, vous voulez ceci:

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

Lorsque la souris survole le td, l'arrière-plan de l'image .bold change.