Hervorhebungszeile der HTML-Tabelle beim Hover außer der ersten Zeile (Kopfzeile)

Lesezeit: 5 Minuten

Alle,

Ich habe eine ASP.NET GridView, die in eine HTML-Tabelle gerendert wird.

<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>

Ich möchte die Zeile hervorheben, wenn die Maus darüber bewegt wird – mit Ausnahme der ersten Zeile, die die Kopfzeile ist.

Ich bin gerade dabei, meinen Kopf mit JQuery nass zu machen, und habe mich ein wenig mit CSS beschäftigt (entweder CSS2 oder CSS3). Gibt es dafür einen bevorzugten Weg?

Kann mir jemand einen Ansatzpunkt dafür geben?

Prost

Andez

Es gibt eine Möglichkeit, das gewünschte Verhalten zu erreichen, ohne jede Zeile separat zu klassifizieren. So markieren Sie jede Tabellenzeile mit Ausnahme der ersten (Kopfzeile) beim Hover mit CSS :not und :first-child Selektoren:

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

Leider wird IE < 9 nicht unterstützt :notum dies browserübergreifend zu tun, können Sie so etwas verwenden:

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

Grundsätzlich beinhaltet die erste CSS-Regel alle Reihen. Um das Hervorheben der ersten Zeile zu vermeiden, überschreiben Sie den Hover-Stil, indem Sie mit auswählen tr:first-child und dann halten background-color zu weiß (oder was auch immer die Farbe der nicht hervorgehobenen Zeile ist).

Ich hoffe, das hat auch geholfen!

  • Danke, ich mag diese Lösung auch. +1

    – Andez

    15. August 2012 um 8:32 Uhr

  • Beachten Sie, dass dies nicht funktioniert, wo sich das Markup befindet <table> <thead><th>foo</th> ... </thead> <tbody> <tr>bar</tr> ... </tbody> </table>. Wenn das Ihre Markup-Verwendung ist – viel einfacher – tbody tr:hover Wähler.

    – koniu

    23. März 2015 um 8:39 Uhr


  • Das ist die bessere Antwort. Danke, bei mir funktioniert es sehr gut.

    – Kevin

    27. Dezember 2017 um 6:08 Uhr

  • Funktioniert nicht, wenn Sie Tabellen mit verwenden <thead></thead>

    – Benutzer2924019

    16. Mai 2018 um 14:38 Uhr

  • Das ist besser als die Antwort darüber, aber die Antwort unten ist noch besser. Eines Tages werden wir dort ankommen 🙂

    – DER JOATMON

    29. November 2019 um 19:14 Uhr

Benutzer-Avatar
Morvael

Um die Antwort von user2458978 zu erweitern, ist es sicherlich am besten, die Tabellen richtig zu codieren.

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

Dann ist das CSS einfach

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

Hier ist ein jsFiddle-Beispiel

  • Wie kann ich es mit dem Klassennamen machen? Ich habe den Klassennamen hinzugefügt –jsfiddle.net/bzamfir/2c2jU – aber jetzt funktioniert das Highlight nicht mehr. Danke für die Hilfe

    – bzamfir

    28. Februar 2014 um 22:10 Uhr

  • Entschuldigung – vielleicht ist es jetzt zu spät. Das CSS in Ihrem Fiddle-Beispiel ist leicht abweichend, .hover table tbody tr:hover { background-color: red; } sollte nur .hover tbody sein tr:hover { background-color: red; } da die Tabelle kein untergeordnetes Element des Elements mit der Klasse .hover ist

    – Morvael

    11. März 2014 um 11:28 Uhr

  • Dies ist der richtige Weg, um einen Tisch zu haben, und daher ist dies die beste Antwort.

    – Benutzer2924019

    16. Mai 2018 um 14:37 Uhr

Benutzer-Avatar
Chris

Sie können dies mit dem CSS tun :hover Bezeichner. Hier ist eine Demonstration:

<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;
}

  • Ja, ich habe darüber nachgedacht – CSS-Klasse in jeder Zeile außer der ersten. Hatte gehofft, dass es eine Art erweitertes CSS gibt, um dies zu tun. Prost

    – Andez

    10. August 2012 um 10:48 Uhr

  • @Andez Eigentlich gibt es eine Möglichkeit, ohne Angabe einer Klasse für jede Zeile auszukommen. Bitte schau dir meine neue Antwort an.

    – Chris

    10. August 2012 um 13:01 Uhr

  • -1, Sie sollten die Zeile angeben nicht betroffen sein, um zu schweben, ohne Angabe n Anzahl der Zeilen, die sollten.

    – Stalker

    29. Mai 2014 um 2:57 Uhr

  • @scrowler dies war nur eine der beiden Lösungen, die ich bereitgestellt hatte. Siehe zweite Antwort.

    – Chris

    29. Mai 2014 um 17:05 Uhr

  • @Chris fair genug, das sehe ich. Ich habe Ihrer anderen Antwort +1 gegeben.

    – Stalker

    29. Mai 2014 um 20:55 Uhr

Benutzer-Avatar
Benutzer2458978

1. Platzieren Sie den Header tr innerhalb des ad-Tags

2. Platzieren Sie das andere tr innerhalb des tbody-Tags

3. Verwenden Sie folgendes CSS

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

Benutzer-Avatar
Phsaires

Verwenden Sie das TH-Tag für die erste Zeile und tun Sie Folgendes:

th {
background-color:#fff;

}

Für alle anderen Zeilen:

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

oder

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

Benutzer-Avatar
Oliver Millington

Verwenden Sie jQuery, um dem übergeordneten Element des td eine Klasse hinzuzufügen (wählt th nicht aus)

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

Fügen Sie dann die CSS-Klasse hinzu

.highlight {
   background:red;
}

Benutzer-Avatar
Lars Tuff

Warum nicht einfach verwenden

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

Dies wirkt sich nur auf Tabellenzeilen aus, in denen td enthalten ist, nicht auf Tabellenzeilen, in denen th enthalten ist. Funktioniert in allen Browsern. Prost.

  • Dies würde die einzelnen Zellen hervorheben, während ich denke, dass es besser wäre, die gesamte Zeile hervorzuheben, während Sie den Mauszeiger über eine beliebige Zelle davon bewegen.

    – umbe1987

    5. Dezember 2018 um 16:53 Uhr

1187360cookie-checkHervorhebungszeile der HTML-Tabelle beim Hover außer der ersten Zeile (Kopfzeile)

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy