css懸停在一個不起作用的表行上

Question

我試圖在表行上實現懸停效果，我在我的CSS上有以下代碼。

.datatable tr.row:hover, .datatable tr.altrow:hover {
    color: #000;
    background-color: #FFFACD;
    background-image: url(../Images/bullet.gif);
    background-repeat: no-repeat;
}

但我認為根本沒有應用。 我的問題是

1. 為什么不起作用？
2. 怎么糾正這個？

為清楚起見，這里是小提琴http://jsfiddle.net/naveen/UPhRE/
請不要介意CSS內的圖像。 一切都很好。

Answer 1

您正在單個表格單元格（ td ）上設置背景，該單元格呈現在tr頂部。

如果您有兩個選擇：

1）將所有行背景樣式移動到tr 。

2）更新你的CSS看起來像這樣：

.datatable tr.row:hover td, .datatable tr.altrow:hover td {
    color: #000;
    background-color: #FFFACD;
    background-image: url(../Images/bullet.gif);
    background-repeat: no-repeat;
}

這將呈現行上的顏色： http ： //jsfiddle.net/R9YGw/3/

更新 ：僅包括第一個單元格上的圖像更新：

.datatable tr.row:hover td, .datatable tr.altrow:hover td {
    color: #000;
    background-color: #FFFACD;
}
.datatable tr.row:hover td:first-child, .datatable tr.altrow:hover td:first-child {
    background-image: url(../Images/bullet.gif);
    background-repeat: no-repeat;
}

Answer 2

您遇到的問題是您在td元素上設置了背景顏色，這些元素位於DOM樹的下方，因此這些元素的顏色優先。

如果您將顏色應用於該行，您將看到懸停顯示：

.datatable .row
{
    background-color: #FFFFFF;
}
.datatable .altrow
{
    background-color: #EDF5FF;
}

Answer 3

實際上，你可以懸停它，但它在舊的IE中不會很好用。 您的問題是您的初始（非懸停）顏色被分配給TD元素，而不是TR。 修改你的CSS，這樣做：

.datatable tr.row:hover, .datatable tr.altrow:hover
.datatable tr.row:hover td, .datatable tr.altrow:hover td
{
    color: #000;
    background-color: #FFFACD;
    background-image: url(../Images/bullet.gif);
    background-repeat: no-repeat;
}

它工作正常。 不確定圖像部分在每個TD中的外觀如何，因此您可能需要對該部分進行更多調整。