jquery - tr:odd を使用するときに tr でホバー効果を与える方法

Question

tr:odd セレクターを使用して table>tr 奇数色を指定しています。tr ホバー効果も必要です。通常の tr では問題なく動作しますが、その色は tr:odd には表示されません

ここでコードを取得します: http://jsfiddle.net/MygAx/

前もって感謝します

score 2 · Accepted Answer

これは、スクリプトで設定している css が、外部の css ファイルで設定されているものより優先度の高いインラインと見なされるためです。

これを実行して問題を解決できます。

脚本

$(document).ready(function(){
  $("tr:odd").addClass("odd")
});

CSS

tr.odd{background-color: #eee}
tr:hover{ background:#ccc}

CSS の順序は重要です。

score 1 · Accepted Answer

解決策は、これに jQuery を使用しないことです。

代わりに、標準の CSS セレクターを使用してnth-of-typeこれを実現する必要があります。

:hoverその後、すでに持っているセレクターで簡単にオーバーライドできます。

tr:nth-of-type(2n) {background:#eee;}
tr:hover{ background:#ccc}

この CSS を使用し、JS を削除すると、既存の JSFiddle コードが思いどおりに機能します。

それらを組み合わせて、奇数行が偶数行とは異なるホバー色になるようにすることもできます。

これで発生する唯一の問題は、古いバージョンの IE をサポートしていないことですが、これをnth-of-type回避できるハックがあります。( IE9.jsまたはSelectivizr )

jQuery バージョンで動作しなかった理由は、jQuery が CSS を設定すると、ブラウザーはそれを HTML コード内でインラインとして認識し、プレーンな CSS コードよりも優先度が高くなるためです。

それが役立つことを願っています。

score 0 · Accepted Answer

使用できます!important：

tr:hover{ background:#ccc !important}

css()メソッドは要素にスタイル属性を追加し、スタイル属性のプロパティは他のプロパティをオーバーライドします。使用を避けるために、!important代わりにクラスを使用できます。

$(document).ready(function(){
  $("tr:odd").addClass('grey')
});

score 0 · Accepted Answer

最初にホバーイベントを適用し、他のCSSを再割り当てすると実際に何が起こるかを確認してください（2番目のクラスではないため）要素は2番目のCSSに置き換えられます

4 に答える 4