当行内的单元格具有类名时，为啥 CSS 悬停在表格行上不起作用？

Posted 2023-03-06

技术标签:

【中文标题】当行内的单元格具有类名时，为啥 CSS 悬停在表格行上不起作用？【英文标题】：Why doesn't CSS hover work on table rows when the cells inside the rows have class names?当行内的单元格具有类名时，为什么 CSS 悬停在表格行上不起作用？ 【发布时间】：2011-01-15 23:21:10 【问题描述】：

我被这个问题困住了，所以任何帮助都将不胜感激。我有一个有几行的表。行中的每个单元格都属于某个类。我使用这些类名为单元格着色。

这是我表中的一个示例行：

<tr>
     <td class = "summarypage-odd-column">Theme</td>    <td class = "summarypage-odd-column">Q2 2009</td>   <td class = "summarypage-odd-column">Q1 2009</td>
     <td class = "summarypage-even-column">Theme</td>   <td class = "summarypage-even-column">Q2 2009</td>  <td class = "summarypage-even-column">Q1 2009</td>
     <td class = "summarypage-odd-column">Business Area</td>    <td class = "summarypage-odd-column">Q1 2009</td>   <td class = "summarypage-odd-column">Q1 2008</td>
 </tr>

当用户将鼠标指针移到该行中的任何单元格上时，我想突出显示每一行。所以我使用下面的 CSS 代码来实现。

tr:hover 
  background-color: #FFFAF0; color: #000;

不幸的是，似乎因为每个表格数据单元格都有一个类名，悬停不起作用。但是如果我从数据单元格中删除类名，悬停就可以了。

我的问题是有什么方法可以让悬停的东西适用于表格行，同时仍然具有行内表格数据单元格的类名。

【问题讨论】：

【参考方案1】：

This does not happen for me. 确保仅在检查它们是否有影响时添加/删除类名，并确保 tds 没有自己的背景来掩盖 tr 的背景.

【讨论】：

嗨，Matchu，您给了单元格类名称，但您没有使用这些名称来格式化单元格。尝试将以下两行添加到您的“样式”部分，看看会发生什么。 -- td.onebackground-color: red td.twobackground-color: blue -- 这是我面临的问题。没错。 td 标签位于顶部，因此它们的背景颜色优先。将tr:hover td 作为你的风格怎么样？【参考方案2】：

试试这个：

tr:hover td 
  background-color: #FFFAF0; color: #000;

将其放在现有的 td 样式声明之后以确保安全

【讨论】：

伙计，你完全搞定了！谢谢。当我第一次看到它时，我认为您的解决方案将适用于背面。仅对鼠标指针指向的数据单元格着色，而不是整行（这是我想要的）。但显然情况并非如此。有一些行，比如我不想突出显示的标题，所以我简单地在你的代码下面定义了另一个类并放入： --- tr.summarypage-section-title:hover td background-color: deepskyblue;颜色：#000； --- @Nick Craver 它可以工作，但你能解释一下为什么 tr:hover 不工作吗？ @Bear 因为上面的 html 代码需要嵌套在标签中。一旦你将它们嵌套在表格标签中，tr:hover 的 CSS 至少可以在 Chrome 和 FF 上运行，并且定义了 class 属性。我也有类似的问题。我有具有类的行，我希望悬停以突出显示悬停时的行。我尝试了这个解决方案并弄乱了它，但无济于事。你有什么建议吗？我不能让它工作。顺便说一句，如果这可能是问题，我必须使用 IE8这只突出显示单元格，而不是整行

【参考方案3】：

您可能需要使用 !important 指示符来确保您的悬停样式覆盖类中定义的背景：

tr:hover  
    background-color: #FFFFAF0 !important;
    color: #000 !important;

有趣的是，这不适用于 IE6，因为该浏览器仅将悬停应用于标签。

【讨论】：

【参考方案4】：

类名中的 CSS 指令优先于 <tr> 指令。

要解决此问题，请在 CSS 中使用 td.summarypage-odd-column:hover、td.summarypage-even-column:hover。

注意：如果您使用的是 IE6，则 :hover 仅适用于链接，即 a:hover。

【讨论】：

谢谢，但 'td.summarypage-odd-column:hover' 只突出显示每个数据单元格 dsnt 吗？我希望突出显示整行。尼克的回答'tr：hover td'是要走的路。但是如果你想以不同的方式处理行内的一组单元格，你可以使用类似于你建议的 smthin。例如，不要突出显示空单元格： --> tr:hover td.empty-cells ...table bk color here... 【参考方案5】：

我认为 td 背景颜色会覆盖 tr 背景颜色。 @Nick Craver 给出的解决方案很好。您必须更改单元格背景颜色而不是行背景颜色。