テーブル行の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

trの上にレンダリングされる個々のテーブルセル（td）に背景を設定しています。

次の2つの選択肢がある場合：

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要素に背景色を設定することです。w DOMツリーのさらに下にあるので、これらの色が優先されます。

あなたはホバーが表示されて表示されますちょうど行に色適用する場合：

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

Answer 3

あなたが実際にそれを置くことができますが、それは古いIE年代に偉大な動作しませんが。問題は、最初の（ホバリングしない）色がTRではなくTD要素に割り当てられていることです。 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に表示されるかわからないので、そのパーツの調整が必要な場合があります。