当行内的单元格具有类名时,为什么 CSS 悬停在表格行上不起作用?
我被这个问题困住了,所以任何帮助都将不胜感激.我有一个有几行的表.行中的每个单元格都属于某个类.我使用这些类名为单元格着色.
I am 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
相关文章