Применить эффект при наведении на дочерний элемент

Question

У меня есть панель инструментов (для текстового редактора), который имеет следующий 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> 

Мой КСС как:

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

В этом РЕАЛИЗАЦИЯ <td> который изображение в центре становится серым (#DCDCDC) от обычного цвета (белый), когда мышь нависает над. Однако класс наведения изображения не запускается, если мышь не находится точно над изображением. Есть ли способ применить правило наведения для дочернего элемента (изображение в этом случае)?

Это ожидаемое поведение:

Без парения: фона: белое изображения: серого

С парением: фона: серый изображение: белого

Answer 1

Если я правильно понял ваш вопрос, вы хотите:

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

Когда мышь наводится на td, тогда изменяется фон изображения .bold.