html - CSS テーブル: ホバー時の背景の変更 (代替行を含む)

Question

表のあるサンプルページを作成しました。将来ページが削除された場合に備えて、Pastebin のコードを次に示します。

ホバー時にテーブルの行を強調表示したい。通常の tr では機能しますが、tr.alt (奇数行) では機能しません。

強調表示のコード:

tr:hover,tr.alt:hover
{
background: #f7dcdf;
}

奇数行を別の色にするコード:

tr.alt td
{
background: #daecf5;
}

これを修正する方法はありますか？

score 10 · Accepted Answer

ホバリング効果のルールが .alt カラーの下にあることを確認してください。これにより、以前のルールが上書きされるか、追加されます。!important

tr:hover,tr.alt:hover
{
    background: #f7dcdf!important;
}

また、セル (td) に .alt 行の背景色を適用していることにも注意してください。この色は tr 背景の「前」に表示されるため、ルールを変更して、両方がセルまたは行全体に適用されるようにします。

score 2 · Accepted Answer

問題は、css カスケードルールに従ってtr.alt tdより具体的であることです。tr.alt:hover

簡単な方法は、:hoverルールがルールよりも具体的になるようにすること.altです。tr.alt tdこれは、に変更することで実行できますtr.alt

.alt補足として、クラスが奇数行を対象にする必要がないことを認識していますか? それを処理できる非常に便利な:nth-child()疑似クラスがあります。ここですべてを読むことができます: http://css-tricks.com/how-nth-child-works/

これをあなたのサンプルに自由に適用しました: http://jsfiddle.net/3tV9b/私がしたことは、.alt クラスを持つすべてのセレクターを
変更tr.alt tdして削除したことだけです。tr:nth-child(2n+1)

この手法の大きな利点は、HTML の管理に煩わされる必要がないことです。必要に応じて行を追加したり削除したりでき、交互の色が機能し続けるはずです。

不利な点は (もちろん) IE でのサポートですが、これは実際には機能の損失ではなく、グレースフルデグレードの範囲内にあると思います。

2 に答える 2