javascript - 在子元素上应用悬停效果

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>

我的 CSS 是这样的:

.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 图像的背景发生变化。