Question

我有一个表格列，里面有多个div，以适合图标，标题和说明文字。此外，鼠标悬停时，我需要提供突出显示/叠加效果，突出显示所有列，包括div图像，标题和说明文本。

这是HTML

 <td>
   <div style="display:inline-block; border:1px solid red">left</div>
    <div style="display:inline-block">
    <div style="display:inline-block; border:1px solid blue">top left</div>
    <div style="display:inline-block; border:1px solid green">top right</div>
    <div>bottom </div>  
   </div>
 </td>

当我使用简单的CSS效果更改列的背景时，效果仅显示在单个div上，而不显示在整个表列上。我希望如果任何div鼠标悬停，则应突出显示所有列。

CSS代码

#MyTable td :hover {
background: #cccccc;
}

Answer 1

:hover之前你有一个额外的空格：尝试

#MyTable td:hover { 
   background-color: #ccc;
}

Answer 2

#MyTable td:hover {
  background: #cccccc;
}

我认为问题是你应该在“td”之后使用“：”

Answer 3

似乎您需要在悬停之前删除空格

#MyTable td:hover {
background: #cccccc;
}

请参阅此处的小提琴：http://jsfiddle.net/wooder89/eUCG5/

如果在其中有多个<div> s </div>，则对a上的悬停效果的CSS无法正常工作

3 个答案: