为什么当行中的单元格具有类名称时，CSS悬浮对表行不起作用？ [英] Why doesn't CSS hover work on table rows when the cells inside the rows have class names?

问题描述

我遇到这个问题，所以任何帮助将不胜感激。我有一个表有几行。该行中的每个单元格属于某个类。

i am kind of stuck with this problem so any help would be appreciated. I have a table with several rows. each cell within the row belongs to a certain class. I use these class names to colour the cells.

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

Here is one example row from my table:

<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代码来实现这一点。

I would like to highlight each row when the user moves mouse pointer over any cell in that row. So I used the following CSS code to achieve that.

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

不幸的是，似乎因为每个表数据单元都有一个类名，不行。但是如果我从数据单元中删除类名，悬停的工作。

unfortunately it seems because each table data cell has a class name, the hover does not work. But if I remove the class names from data cells, the hover works.

我的问题是有任何方式，我可以得到悬浮事件为表行，

My question is is there any way I can get the hover thing working for the table row, while still having class names for the table data cells inside the row.

感谢

推荐答案

尝试：

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

将现有 td 样式声明是安全的

Place this after the existing td style declarations to be safe

这篇关于为什么当行中的单元格具有类名称时，CSS悬浮对表行不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！