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

对子元素应用悬停效果

1 个答案: