0

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

这是预期的行为：

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

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

4

1 回答 1

3

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

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

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

于 2013-08-10T17:36:59.093 回答