webentwicklung-frage-antwort-db.com.de

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

Alles,

Ich habe eine ASP.NET-GridView, die in einer HTML-Tabelle dargestellt 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 sich der Mauszeiger darüber befindet - mit Ausnahme der ersten Zeile, die die Kopfzeile ist.

Ich bin gerade erst mit JQuery nass und habe mich ein wenig mit CSS (entweder CSS2 oder CSS3) beschäftigt. Gibt es einen bevorzugten Weg, dies zu tun?

Kann mir jemand einen Startpunkt dafür geben?

Prost

Andez

29
Andez

Sie können dies mit dem CSS :hover-Bezeichner tun. 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;
}
15
Chris

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 Zeile (Kopfzeile) im Hover mit den CSS-Auswahlcodes :not und :first-child:

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

Leider unterstützt IE <9 :not nicht. Um dies browserübergreifend zu tun, können Sie Folgendes verwenden:

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

Grundsätzlich beinhaltet die erste CSS-Regel alle Zeilen . Um zu vermeiden, dass die erste Zeile hervorgehoben wird, überschreiben Sie den Hover-Stil, indem Sie mit tr:first-child auswählen und dann background-color auf Weiß setzen (oder auf die Farbe der nicht hervorgehobenen Zeile).

Ich hoffe das hat auch geholfen!

63
Chris

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

29
Morvael

1. Platzieren Sie den Header tr innerhalb des Tag

2. Platzieren Sie ein anderes tr innerhalb des body-Tags

3. Verwenden Sie folgendes CSS 

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

Verwenden Sie jQuery, um dem übergeordneten Element des TD eine Klasse hinzuzufügen (wird nicht ausgewählt).

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

Fügen Sie dann die CSS-Klasse hinzu

.highlight {
   background:red;
}
1

Warum nicht einfach verwenden

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

Dies betrifft nur Tabellenzeilen mit tds innerhalb, nicht Tabellenzeilen mit ths. Funktioniert in allen Browsern. Prost.

1
Lars Tuff

Warum nicht so etwas wie:

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

Verwenden Sie TH Tag für die erste Zeile und machen Sie das:

th {
background-color:#fff;

}

Für alle anderen Zeilen:

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

oder

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

Bei meiner Anforderung muss ich alle geraden Zeilen außer der Kopfzeile hervorheben.

Daher ist diese Antwort für die obige Frage möglicherweise nicht geeignet.

Selbst dann gebe ich hier meine Antwort mit der Hoffnung, dass jemand anderes meine Antwort verwenden kann, wenn sie auf diese Seite in der Suchmaschinensuche treffen.

Meine Antwort lautet:

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