如果 中有多个 ，则 上悬停效果的 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;
}