CSS表格跨度悬停继承

Posted 2023-03-06

【中文标题】CSS表格跨度悬停继承

【英文标题】：CSS table span hover inheritance

【发布时间】：2012-03-21 14:02:23

【问题描述】：

试图了解发生了什么，也许有人可以解释。 在:HOVER 上，我希望整个表格内容变得透明。这适用于 td 包装器中的文本。但是，span 包装器中的文本不知道它应该是透明的。

如果我突然从span CSS 中删除color:#897，它会按照我的意愿进行操作，并且所有文本都会变得透明。我确实尝试了各种 CSS 技巧但无济于事，该表拒绝将 span 识别为 table 的后代。如果可能的话，出了什么问题以及如何解决它。

【参考方案1】：

原因是您将SPAN 中的颜色定义为table#Factors span 并且您定义了悬停table#Factors:hover 所以SPAN 的color 仍然覆盖您table#Factors:hover 类颜色。像这样写：

table#Factors:hover span
  color:transparent;

查看http://jsfiddle.net/AyNg3/

阅读更多http://diythemes.com/thesis/css-specificity-thesis/

【参考方案2】：

jsFiddle

table:hover,
table:hover span
    color: transparent;
    background: transparent;
​

您只需要为span 添加一个选择器。