当行内的单元格具有类名时，为什么 CSS 悬停在表格行上不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2248875/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why doesn't CSS hover work on table rows when the cells inside the rows have class names?
提问by Vicer
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>
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.
当用户将鼠标指针移动到该行中的任何单元格上时，我想突出显示每一行。所以我使用以下 CSS 代码来实现这一点。
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.
我的问题是有什么方法可以使悬停操作适用于表格行，同时仍然具有行内表格数据单元格的类名。
回答by Nick Craver
Try this:
尝试这个：
tr:hover td {
background-color: #FFFAF0; color: #000;
}
Place this after the existing tdstyle declarations to be safe
将它放在现有的td样式声明之后是安全的
回答by Matchu
This does not happen for me.Make sure that you're only adding/removing class names when checking if they have an impact, and make sure that the tds don't have their own background covering up that of the tr.
这不会发生在我身上。确保在检查类名是否有影响时只添加/删除类名，并确保tds 没有自己的背景覆盖tr.
回答by BC.
You probably need to use the !important designator to make sure that your hover style overrides the background defined int he class:
您可能需要使用 !important 指示符来确保您的悬停样式覆盖在类中定义的背景：
tr:hover {
background-color: #FFFFAF0 !important;
color: #000 !important;
}
Interestingly, this won't work for IE6 because that browser only applies hover to a tags.
有趣的是，这不适用于 IE6，因为该浏览器仅将悬停应用于标签。
回答by Sarhanis
The CSS instructions within the classname takes precedence over the <tr>instructions.
类名中的 CSS 指令优先于<tr>指令。
To fix this, use td.summarypage-odd-column:hover, td.summarypage-even-column:hover inside your CSS.
要解决此问题，请在 CSS 中使用 td.summarypage-odd-column:hover、td.summarypage-even-column:hover。
Note: If you're using IE6, the :hover only works on links, i.e. a:hover.
注意：如果您使用的是 IE6，则 :hover 仅适用于链接，即 a:hover。
回答by Luis Tark
I think the tdbackground-color overwrites the tr background-color. The solution given by @Nick Craver is the good one.
You must change cells background-color not the row background-color.
我认为td背景颜色会覆盖 tr 背景颜色。@Nick Craver 给出的解决方案是很好的解决方案。
您必须更改单元格背景颜色而不是行背景颜色。
tr:hover td {
...
}
回答by Saras Arya
never put space between
永远不要在它们之间留空间
tr:hover(space)td
I was giving space hence it was working for me.
我正在给空间，因此它对我有用。
