CSS在悬停效果上 如果<td> <td> <div>里面有多个s，则无法正确吝啬

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/