36

全て、

HTML テーブルにレンダリングされる ASP.NET GridView があります。

<table>
    <tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>
    <tr><td>Data 1</td><td>Data 2</td></tr>
    <tr><td>Data 3</td><td>Data 4</td></tr>
</table>

ヘッダーである最初の行を除いて、マウスがその上に置かれたときに行を強調表示したい。

私はちょうど JQuery に頭を悩ませていて、CSS (CSS2 または CSS3) に少し手を出しました。これを行うための好ましい方法はありますか？

誰でもこれの出発点を教えてもらえますか?

乾杯

アンデス

4

10 に答える 10

81

各行を個別に分類せずに、目的の動作を実現する方法があります。:notCSSと:first-childセレクターを使用して、ホバー時に最初の行 (ヘッダー) を除く各テーブル行を強調表示する方法は次のとおりです。

tr:not(:first-child):hover {
    background-color: red;
}

残念ながら、IE < 9 は をサポートしていないため:not、クロスブラウザーでこれを行うには、次のようなものを使用できます。

tr:hover {
    background-color: red;
}
tr:first-child:hover {
    background-color: white;
}

基本的に、最初の CSS ルールにはすべての行が含まれます。最初の行が強調表示されないようにするには、ホバー スタイルを上書きして選択しtr:first-child、それbackground-colorを白のままにします (または、強調表示されていない行の色は何でも)。

それも役に立てば幸いです！

于 2012-08-10T13:06:50.043 に答える
49

user2458978 の回答を拡張するには、これを行う最善の方法は、テーブルを正しくコーディングすることです。

<table>
<thead>
    <tr><th></th></tr>
</thead>
<tbody>
    <tr><td></td></tr>
    <tr><td></td></tr>
</tbody>
</table>

次に、CSSは単純です

table tbody tr:hover { background-color: red; }

これがjsFiddleの例です

于 2013-08-13T13:17:32.720 に答える
19

これは、CSS:hover指定子を使用して行うことができます。これがデモンストレーションです：

<table>
    <tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>
    <tr class = "notfirst"><td>Data 1</td><td>Data 2</td></tr>
    <tr class = "notfirst"><td>Data 3</td><td>Data 4</td></tr>
</table>

CSS：

.notfirst:hover {
    background-color: red;
}
于 2012-08-09T10:03:49.700 に答える
2

jQueryを使用して、tdの親要素にクラスを追加します（thを選択しません）

$('td').hover(function(){
   $(this).parent().addClass('highlight');
}, function() {
   $(this).parent().removeClass('highlight');
});

次に、CSSクラスを追加します

.highlight {
   background:red;
}
于 2012-08-09T10:04:42.330 に答える