CSS Kopfzeile th von anderen Zeilen tr ausschließen

[koffi]

hallo!

eine relativ einfache sache, nur bin ich etwas frustriert, dass ich mir das nicht selbst erklären kann.

ich habe eine tabelle mit folgendem stinknormalem aufbau

<table>
<th>Date & Time</th><th>Type</th><th>Message</th>
<tr><td>10.12.2012 22:25</td><td>bla</td><td>hallo</td></tr>
<tr><td>10.12.2012 20:40</td><td>bla2</td><td>test</td></tr>
</table>

nun möchte ich, dass beim drüberfahren mit der maus einer zeile sich deren text komplett blau färbt. hier teil der css:

#mailbox_content tr:hover {
	cursor: pointer;
	color: #3b5998;
}

also laut der css spreche ich doch alle tr an. jedoch taucht dieser hover effekt auch in der kopfzeile th auf! das ist doch völliger quatsch! warum wird denn th auch als tr gewertet, und wie bekomme ich das geregelt, dass th von diesem hover effekt ausgeschlossen wird?

 

[sYnq]

Na du musst <th> in ein <tr> packen!

http://www.mediaevent.de/xhtml/th.html

Anschließend definierst du die Hintergrundverfärbung halt für td:hover.

 

[koffi]

wenn ich sie für td:hover definiere, wird ja immer nur die zelle gefärbt, über die man mit der maus fährt. aber ich möchte die ganze zeile!

ich fürchte ich muss den tr's id's vergeben, und diese dann gesondert ansprechen, oder?

 

[WhiteShark]

Wie mein Vorredner schon sagt, sind th nicht als "Ersatz" für tr, sondern für td gedacht.
So wäre es richtig:

<table>
<tr><th>Date & Time</th><th>Type</th><th>Message</th></tr>
<tr><td>10.12.2012 22:25</td><td>bla</td><td>hallo</td></tr>
<tr><td>10.12.2012 20:40</td><td>bla2</td><td>test</td></tr>
</table>

wenn ich sie für td:hover definiere, wird ja immer nur die zelle gefärbt, über die man mit der maus fährt

Nur wenn du es nicht richtig machst...
So werden alle td's der gehoverten Zeile farblich hervorgehoben:

#mailbox_content tr:hover td {
	cursor: pointer;
	color: #3b5998;
}

 

[koffi]

ooh! ich verstehe. dann hab ich da wohl was falsch verstanden.
vielen dank

 

[DJND]

Du kannst die fürs hover zu nutzenden <tr> mit irgendeiner Klasse versehen... also z.b.

    <table>
    <tr><th>Date & Time</th><th>Type</th><th>Message</th></tr>
    <tr class="hoverthis"><td>10.12.2012 22:25</td><td>bla</td><td>hallo</td></tr>
    <tr class="hoverthis"><td>10.12.2012 20:40</td><td>bla2</td><td>test</td></tr>
    </table>

Diese Klasse kannst du nun aktiv per CSS auswählen.

    #mailbox_content tr.hoverthis td:hover {
    cursor: pointer;
    color: #3b5998;
    }

Hm, ich bin mir gerade nicht sicher, ob man Klasse und Pseudoklasse gemeinsam ansprechen kann, also "tr.hoverthis:hover" oder nicht. Drum hab ich die Pseudoklasse auf das td geschoben hier.

Ich persönlich ziehe allerdings Zebratabellen vor, also eine Tabelle, in der jede zweite Reihe in einem etwas anderen Farbton dargestellt wird. Abgesehen von der CSS-Definition nutze ich dazu JQuery. Und wenn ich gerade schonmal dabei bin, dann löse ich das Mouseover auch gleich damit, erspart Zeit:

	// hover
  $("table tr").hover(function() {
  	$(this).addClass("over");
  }, function() {
  	$(this).removeClass("over");
  });

// stripe color the tables
$("table tr:even").addClass("alt");

 

[Daaron]

Hm, ich bin mir gerade nicht sicher, ob man Klasse und Pseudoklasse gemeinsam ansprechen kann, also "tr.hoverthis:hover" oder nicht. Drum hab ich die Pseudoklasse auf das td geschoben hier.

Das funktioniert so nicht, wie du es schreibst. Du musst durchaus ".hoverthis:hover td" bzw. "tr.hoverthis:hover td" sagen.
Für CSS-Selektoren gilt aber: So lang wie nötig, so kurz wie möglich... also ".hoverthis:hover > *". Dann kann mans auch für was anderes verwenden.