如果 <td> 内部有多个 <div>，则 <td> 上悬停效果的 CSS 无法正常工作

Posted 2023-03-06

【中文标题】如果 <td> 内部有多个 <div>，则 <td> 上悬停效果的 CSS 无法正常工作

【英文标题】：CSS on hover effect on a <td> does not wok properly if <td> has multiple <div>s inside it

【发布时间】：2013-04-04 23:52:48

【问题描述】：

我有一个表格列，其中包含多个 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;

【问题讨论】：

按如下方式删除空格：#MyTable td:hover ;)

td :hover 之间的空格表示样式将应用于td 的后代，即所有<div> 元素，而不是添加动态伪类的td:hover td 自己

啊，@andyb 这就是我要找的解释。太感谢了。谢谢！

很高兴帮助澄清为什么，因为没有一个答案这样做:-)

关于一个稍微相关的话题 - 我的

有一些填充。我不想突出填充，只是 内的内容（div）。有办法吗？谢谢

【参考方案1】：

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

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

【参考方案2】：

#MyTable td:hover 
  background: #cccccc;

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

【参考方案3】：

看来你需要在悬停前删除空格

#MyTable td:hover 
background: #cccccc;

在此处查看小提琴：http://jsfiddle.net/wooder89/eUCG5/