对子元素应用悬停效果答案

【问题标题】：Apply hover effect on child element对子元素应用悬停效果
【发布时间】：2013-08-10 17:33:53
【问题描述】：

我有一个工具栏（用于文本编辑器），它具有以下 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）。但是，除非鼠标正好在图像上，否则不会触发图像悬停类。有没有办法为子元素（在这种情况下为图像）应用悬停规则？

这是预期的行为：

没有悬停：背景：白色图片：灰色

悬停：背景：灰色图片：白色

【问题讨论】：

标签： javascript html css

【解决方案1】：

如果我理解你的问题，你想要这个：

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

当鼠标悬停在td 上时，.bold 图像的背景会发生变化。

【讨论】：

像魅力一样工作！谢谢！