css懸停在錶行不工作

我想實現表格行上的懸停效果，我在我的CSS上有以下代碼。css懸停在錶行不工作

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

但我根本沒有看到被應用。我的問題是

爲什麼它不起作用？
如何糾正？

爲了清楚這裏是小提琴http://jsfiddle.net/naveen/UPhRE/
請不要介意CSS中的圖像。一切都很好。

來源

2011-08-05 naveen

您正在設置單個表格單元格上的背景（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; 
}

來源

2011-08-05 06:56:56 OverZealous

+1：謝謝你的解釋。是的，懸停正在工作，但你的小提琴剛剛失去了altrow BG。 – naveen

另外，第二種方法的問題是，我希望圖像只在第一個tds左上角出現。 – naveen

糟糕 - 我提交了錯誤的版本，現在試試鏈接！ – OverZealous

你的問題在於你設置了td元素的背景顏色，w它們在DOM樹下面，因此這些顏色優先。

如果你申請的顏色，只是行，你會看到懸停顯示：

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

來源

2011-08-05 06:57:17

+1：謝謝斯蒂芬我已經完成了。 – naveen

你可以將鼠標懸停它，其實，但它不會工作在較舊的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中的外觀如何，因此您可能需要對該部分進行更多的調整。

來源

2011-08-05 06:59:18

+1謝謝。我只想在第一個TD的圖像，所以這是一個問題。 – naveen

http://jsfiddle.net/BradleyStaples/TYjhA/1/ - 僅在第一個TD細胞上處理圖像。 –

css懸停在錶行不工作

回答

相關問題