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

Question

I am trying to make my table rows highlight when i hover my mouse over them

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

Seems to work find on TD tags, but I seem to have trouble getting it to work for TR tags :

Fiddle :

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

Any idea what I am doing wrong?

Answer 1

The proper CSS should be this:

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

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

You can't (reliably) style a <tr> , so you need to apply the style to children <td> s on hover (hence tr:hover td .

Additionally, the .Table class doesn't refer to any elements in your fiddle, which may also be causing problems.

Answer 2

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

You can just do:

td:hover {
    background-color:red;
}

Answer 3

try like this

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

Fiddle

Answer 4

Your CSS selector was incorrect:

Both

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

and

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

will work here.

Fiddle: http://jsfiddle.net/kUTDB/7/

---

if you needed to be very specific, you could use this selector:

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

However, since longer selectors cost time, the more broad selectors are better. Really, you only need .PopupRow:hover here.

Answer 5

You need to do the td

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

Answer 6

As stated on your previous question :

Your CSS selectors are not selecting anything.

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

should be:

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

(See: http://jsfiddle.net/kUTDB/4/ )

and

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

should be

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

or

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

(See: http://jsfiddle.net/kUTDB/5/ )

Mind you, these will both select the same elements so the selector with more specificity (the second one) will be the one that is actually used.

Your first selector, .Table .Popup tr:hover will match tr elements that are currently being hovered over and that are descendants of any element with a class of Popup which are in turn descendants of any element of with a class of Table .

Your second selector, .Table .Popup .PopupRow:hover will match any elements with a class of PopupRow that are currently being hovered over and that are descendants of any element with a class of Popup which are in turn descendants of any element of with a class of Table .

The markup in your fiddle does not reflect that structure and so nothing is matched by the selectors (which is why your style is not reflected).

Answer 7

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

} This will totally work.