web-dev-qa-db-ja.com

HTMLテーブルの最初の行（ヘッダー）を除くホバーの行を強調表示

すべて、

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）で少し手を出したばかりです。これを行うための好ましい方法はありますか？

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

乾杯

アンデス

htmlhoverhighlight
30
Andez

これを行うには、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;
}
15
Chris

各行を個別に分類することなく、目的の動作を実現する方法があります。 CSS :notおよび: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ルールにはall rowsが含まれます。最初の行が強調表示されないようにするには、tr:first-childで選択し、background-colorを白（または強調表示されていない行の色）のままにしてホバースタイルをオーバーライドします。

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

70
Chris

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の例です

35
Morvael

1.ヘッダーtrを広告タグ内に配置します

2. tbodyタグ内に他のtrを配置します

3.次のCSSを使用

table tr:not(thead):hover {
    background-color: #B0E2FF;
}
11
user2458978

JQueryを使用して、クラスをtdの親要素に追加します（thを選択しないでください）

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

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

.highlight {
   background:red;
}
2
Oliver Millington

最初の行にTHタグを使用し、それを行います：

th {
background-color:#fff;

}

他のすべての行の場合：

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

または

tr:hover td {
    background-color:#eee;
}
2
phsaires

なぜ単純に使用しないのですか

tr>td:hover {
/* hover effect */
background-color: lightblue;
}

これは、tdが内部にあるテーブル行にのみ影響し、thが内部にあるテーブル行には影響しません。すべてのブラウザで動作します。乾杯、みんな。

2
Lars Tuff

次のようなものはなぜですか：

tr:first-child ~ tr { background-color:#fff; }
0
user3174546

要件として、ヘッダー行を除くすべての偶数行を強調表示する必要があります。

したがって、この答えは上記の質問には適さない可能性があります。

それでも、他の誰かが検索エンジン検索でこのページに出会った場合に誰かが私の答えを使用できることを期待して、ここで私の答えを与えています。

私の答えは：

$("#tableName tr:even").not("tr:nth(0)").addClass("highlight");
0
Ashok kumar