ホバーのCSSはjQueryで奇数行にのみ適用されます

私はこのコードを持っていますが、実際の行を交互に表示するのにうまく動作しますが、「奇妙な」行を表示します。ホバーのCSSはjQueryで奇数行にのみ適用されます

<script type="text/javascript"> 
$(document).ready(function(){ 
    //jQuery ready is quicker than onload 
$(".stripeMe tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");}); 
$(".stripeMe tr:even").addClass("alt"); 
});

これは私が

#table tr.over td{background: #bcd4ec;} 
    #table tr.alt td {background: #ecf6fc;}

任意のアイデアを使用しているCSSは次のとおりです。

私は、次のコードを使用していますか？

出典

2011-06-15 Khuram Malik

あなたのスタイルの上には、お使いの代替スタイルで上書きされます。あなたは線を切り替える必要があります。

今

#table tr.alt td {background: #ecf6fc;} 
#table tr.over td{background: #bcd4ec;}

.altそれは先に定義されているため.overより優先度が低いです。

出典

2011-06-15 15:16:42 DanielB

変更CSS：

#table tr td { /* regular not hovered */ } 
#table tr.alt td { /* alternative, not hovered */ } 

#table tr.over td {background: #bcd4ec;} 
#table tr.alt.over td {background: #ecf6fc;}

出典

2011-06-15 15:14:47 yoavmatchulsky

これを管理するためにjQuery/Javascriptは必要ありません。 yoavmatchulskyは述べているように、あなたのCSSを変更するが、代わりにクラスを超える、使用：

#table tr td { /* regular */ } 
#table tr.alt td { /* regular */ } 

#table tr:hover td { background: #bcd4ec; } 
#table tr.alt:hover td { background: #ecf6fc; }

EDITホバー：jQueryのを使用するために必要ですのでを、これはOPに答えるために動作しない場合があります。これは、jQuery IMOを使用するよりも速くなります。 jQueryは、ページ上の複数の要素（例：表の行）の動作を見つけて更新し、動作を適用する必要があります。

出典

2011-06-15 15:19:43 Rob

ブラウザ間違い 'サポート：even'、わずか数サポート'：hover'それは 'A'タグ – Neal

ではありませんあなたはこれをサポートするリンクを提供することはできますか？ IE7 +以上のものはアンカー以外の要素に '：hover'をサポートしています：http://www.quirksmode.org/css/contents.html – Rob

IEは間違いなく**サポートしていません：。 – Neal

ここでは例題がありますが、問題はCSSのヘラクシーです。この場合、overクラスがaltクラスを置き換えます。

<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5b1.js"></script> 
</head> 
<body> 
    <style> 
    #table tr.alt { background: #ecf6fc;} 
    #table tr.over { background: red;} 
    </style> 
<table id="table" class="stripeMe"> 
    <tr> 
    <td>aaaa</td> 
    </tr> 
    <tr> 
    <td >bbbb</td> 
    </tr> 
</table> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    //jQuery ready is quicker than onload 
    $(".stripeMe tr").mouseover(function()   {$(this).removeClass("over");$(this).addClass("over");}).mouseout(function() {$(this).removeClass("over");}); 
    $(".stripeMe tr:even").addClass("alt"); 
}); 
</script> 
</body> 
</html>

出典

2011-06-15 15:26:37 JAiro

ホバーのCSSはjQueryで奇数行にのみ適用されます

答えて

関連する問題