如果<td>内部有多个<div>s，则<td>上的CSS on hover效果不能正常工作

Question

我有一个表列，里面有多个div，以适合图标、标题和描述文本。此外，在鼠标悬停时，我需要提供一个突出显示/overlay效果，突出显示所有列，包括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之前有额外的空格: try with

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

Answer 2

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

我认为问题是你应该在"td“之后加上":”

Answer 3

似乎您需要在悬停前删除该空间

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

请在此处查看fiddle：http://jsfiddle.net/wooder89/eUCG5/