html - 无法使 CSS 悬停在表格中的 TR 上工作

Question

当我将鼠标悬停在表格行上时，我试图使表格行突出显示

.Table .Popup tr:hover {
    background-color:red;
}

似乎可以在TD上找到标签上找到，但我似乎很难让它适用于TR标签：

小提琴：

知道我做错了什么吗？

score 5 · Accepted Answer

正确的 CSS 应该是这样的：

.Popup tr:hover td {
    background-color:red;
}

.Popup .PopupRow:hover td {
    background-color:red;
}

您不能（可靠地）设置样式 a ，因此您需要在悬停<tr>时将样式应用于 children （因此.<td>tr:hover td

此外，.Table该类没有引用您小提琴中的任何元素，这也可能导致问题。

score 3 · Accepted Answer

3

你可以这样做：

td:hover {
    background-color:red;
}

于 2013-07-04T15:55:18.713 回答

score 2 · Accepted Answer

2

试试这样

.PopupContainer .Popup tr:hover {
    background-color:red;
}

于 2013-07-04T15:55:27.337 回答

score 2 · Accepted Answer

您的 CSS 选择器不正确：

两个都

table tr:hover {
    background-color:red;
}

和

table .PopupRow:hover {
    background-color:red;
}

将在这里工作。

如果你需要非常具体，你可以使用这个选择器：

div.PopupContainer div.Popuptable table tbody tr.PopupRow:hover{

但是，由于较长的选择器会花费时间，因此选择器越宽越好。真的，你只需要.PopupRow:hover这里。

score 2 · Accepted Answer

2

你需要做 td

tr:hover td {
     background-color:red;
}

于 2013-07-04T15:56:33.783 回答

score 2 · Accepted Answer

你的 CSS 选择器没有选择任何东西。

.Table .Popup tr:hover {
    background-color:red;
}

应该：

.Popup tr:hover {
    background-color:red;
}

和

.Table .Popup .PopupRow:hover {
    background-color:red;
}

应该

table tr.PopupRow:hover {
    background-color:red;
}

或者

table .PopupRow:hover {
    background-color:red;
}

请注意，它们都将选择相同的元素，因此具有更多特异性的选择器（第二个）将是实际使用的选择器。

您的第一个选择器.Table .Popup tr:hover将匹配tr当前悬停在其上的元素，并且这些元素是任何具有.Popup类的元素的后代，而这些元素又是具有Table.

您的第二个选择器将匹配.Table .Popup .PopupRow:hover当前PopupRow悬停在.PopupTable

您的小提琴中的标记没有反映该结构，因此选择器没有匹配任何内容（这就是您的样式没有反映的原因）。

score 1 · Accepted Answer

1

.Popup tr:hover { 背景色:红色;

这将完全有效。

于 2013-07-04T16:40:03.783 回答

7 回答 7