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

Question

当我将鼠标悬停在它们上面时，我正试图让我的表格行突出显示

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

似乎可以找到 TD 标签，但我似乎无法将其用于 TR 标签：

小提琴：

http://jsfiddle.net/kUTDB/2/

知道我做错了吗？

Answer 1

正确的CSS应该是这样的：

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

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

您无法（可靠地）设置<tr>的样式，因此您需要在悬停时将样式应用于子<td>（因此tr:hover td。

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

Answer 2

http://jsfiddle.net/kUTDB/12/

你可以这样做：

td:hover {
    background-color:red;
}

Answer 3

试试这个

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

Fiddle

Answer 4

您的CSS选择器不正确：

两个

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

和

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

将在这里工作。

小提琴：http://jsfiddle.net/kUTDB/7/

<小时/> 如果您需要非常具体，可以使用此选择器：

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

但是，由于选择器时间越长，选择器越宽越好。实际上，您只需要.PopupRow:hover。

Answer 5

你需要做td

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

Answer 6

正如您previous question所说：

您的CSS选择器没有选择任何内容。

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

应该是：

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

（参见：http://jsfiddle.net/kUTDB/4/）

和

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

应该是

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

或

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

（参见：http://jsfiddle.net/kUTDB/5/）

请注意，这些都将选择相同的元素，因此具有更多specificity（第二个）的选择器将是实际使用的选择器。

您的第一个选择器.Table .Popup tr:hover将匹配当前正在和上悬停的tr元素，这些元素是类Popup的任何元素的后代反过来是Table类的任何元素的后代。

您的第二个选择器.Table .Popup .PopupRow:hover将匹配当前正在和上悬停的PopupRow类的任何元素，这些元素是类{的任何元素的后代{1}}，它们是Popup类的任何元素的后代。

你的小提琴中的标记并不反映这种结构，因此选择器没有匹配（这就是为什么你的风格没有被反映出来）。

Answer 7

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

} 这将完全奏效。