CSS-Klasse per JavaScript ansprechen?

P

Pixelprofi

Aktives Mitglied
Thread Starter
Dabei seit
08.11.2002
Beiträge
420
Reaktionspunkte
2
Hallo,

ich habe eine einfache Tabelle mit mehreren Zeilen und Spalten.
Wenn man mit der Maus über eine Zeile fährt, soll sich die Hintergrundfarbe der gesamten Zeile ändern.
Da ich die Farbangaben aber nicht in jede Zeile einzeln schreiben möchte, soll JavaScript eine CSS-Klasse ansprechen. In dieser Klasse könnte ich dann die Farbangabe global ändern.
Weiß jemand von Euch Besserwissern ;) wie ich mit JavaScript die Klasse "over" und "out" ansprechen kann? Vielen Dank für Eure Hilfe?

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.over {
	background-color:#ff0000;
}

.out {
	background-color:#ffffff;
}
</style>

</head>

<body>
<table style="border-collapse:collapse">
	<tr onmouseover="this.style.backgroundColor='ff0000';" onmouseout="this.style.backgroundColor='#ffffff';">
		<td width="100px" style="border:1px solid black">Text</td>
		<td width="100px" style="border:1px solid black">Text</td>
		<td width="100px" style="border:1px solid black">Text</td>
		<td width="100px" style="border:1px solid black">Text</td>
	</tr>
	
	<tr onmouseover="this.style.backgroundColor='ff0000';" onmouseout="this.style.backgroundColor='#ffffff';">
		<td width="100px" style="border:1px solid black">Text</td>
		<td width="100px" style="border:1px solid black">Text</td>
		<td width="100px" style="border:1px solid black">Text</td>
		<td width="100px" style="border:1px solid black">Text</td>
	</tr>
	
	<tr onmouseover="this.style.backgroundColor='ff0000';" onmouseout="this.style.backgroundColor='#ffffff';">
		<td width="100px" style="border:1px solid black">Text</td>
		<td width="100px" style="border:1px solid black">Text</td>
		<td width="100px" style="border:1px solid black">Text</td>
		<td width="100px" style="border:1px solid black">Text</td>
	</tr>
</table>

</body>
</html>
 
HTML: 
<tr onmouseover="this.className='over';" onmouseout="this.className='out'">

Korrekt nach W3C DOM, aber keine Ahnung, welche Browser das unterstützen...
 
Warum nicht nur mit CSS machen?

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

table tr:hover {
    background-color:#ff0000;
}

</style>

</head>

<body>
<table style="border-collapse:collapse">
    <tr>
        <td width="100px" style="border:1px solid black">Text</td>
        <td width="100px" style="border:1px solid black">Text</td>
        <td width="100px" style="border:1px solid black">Text</td>
        <td width="100px" style="border:1px solid black">Text</td>
    </tr>
   
    <tr>
        <td width="100px" style="border:1px solid black">Text</td>
        <td width="100px" style="border:1px solid black">Text</td>
        <td width="100px" style="border:1px solid black">Text</td>
        <td width="100px" style="border:1px solid black">Text</td>
    </tr>
   
    <tr>
        <td width="100px" style="border:1px solid black">Text</td>
        <td width="100px" style="border:1px solid black">Text</td>
        <td width="100px" style="border:1px solid black">Text</td>
        <td width="100px" style="border:1px solid black">Text</td>
    </tr>
</table>

</body>
</html>

Allerdings brauchst Du einen Javascript-Workaround für den IE v6, da der die Pseudoklasse :hover nur auf a-Selektoren unterstützt.

Hier findest Du mehr dazu (Stichwort csshover.htc):

http://www.hoeben.net/node/33
http://www.hoeben.net/node/83
http://www.xs4all.nl/~peterned/csshover.html

[BESSERWISSER_MODUS]

Übrigens lässt sich

HTML: 
<td width="100px" style="border:1px solid black">Text</td>
<td width="100px" style="border:1px solid black">Text</td>
<td width="100px" style="border:1px solid black">Text</td>
<td width="100px" style="border:1px solid black">Text</td>
.
.
.
undsoweiterundsofort
.
.
.

mit CSS via

HTML: 
table td {
   width: 100px;
   border: 1px solid black;
}

und

HTML: 
<td>Text</td>
<td>Text</td>
<td>Text</td>
.
.
.
undsoweiterundsofort
.
.
.

vereinfachen und abkürzen. Oder willst Du jedesmal 100 Zellen (oder so) manuell auf eine neue Breite anpassen?

;)

[/BESSERWISSER_MODUS]


2nd
 
Zuletzt bearbeitet:
Hey Ihr beiden!

Zunächst einmal danke für die Hilfe. :thumbsup:

Das von Dir Kay schaut sehr gut aus. Jetzt teste ich mal, welche Browser damit etwas anfangen können.

Der Tipp von 2ndreality klingt ebenfalls sehr gut. War bis eben fest der Meinung, dass ich hover nur auf a-Tags anwenden kann. Schaue mir dann auch gleich mal die Workarounds an.
Deinen Vorschlag bzgl. der globalen Klassendefinition für table und td ist nett - und Standard :Pfeif: ;)

Halte Euch auf dem Laufenden.

Viele Grüße
Pixelprofi
 
Gemäß der Spezifikation kann man :hover auf alle Selektoren anwenden - nur der IE v6 unterstützt das nicht, alle anderen modernen Browser schon (auch IE v7).

Der Vorteil von der reinen CSS Variante ist der, dass man bei deaktiviertem JS trotzdem noch den Effekt hat - mit der Einschränkung vom Nichtfunktionieren im IE. Nimmt man die JS-Variante, geht es in keinem Browser mehr.

Aber das ist nur meine Meinung...

2nd
 
Habe es mit CSS umgesetzt.
Das Workaround funktioniert wunderbar.

Nochmals vielen Dank an Euch beide :clap:

Grüße
Pixelprofi
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten