css - 如果有多个，悬停效果上的 CSS 将无法正常工作里面的

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;
}

在这里看小提琴：http: //jsfiddle.net/wooder89/eUCG5/

Answer 3

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

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