对子元素应用悬停效果

Apply hover effect on child element

本文关键字：悬停 应用 元素      更新时间：2023-09-26

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

这是预期的行为：

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

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

如果我

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

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

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

相关文章：