CSS-Klassen mit Javascript dynamisch ändern

[Robert Hillbe]

Problemstellung:
Mit CSS ist es möglich, ganze <DIV>-Bereiche mit der Pseudoklasse :hover zu versehen, damit sie beim Überfahren mit der Maus ihr Aussehen ändern. Leider wird diese Funktion nicht von allen Browsern unterstützt. Einige Browser interpretieren die Pseudoklasse :hover nur für Links.

Lösungsidee:
Wenn es möglich wäre, ein Javascript zu realisieren, das bei "onmouseover" dem betreffenden Element die CSS-Klasse .hover zuweist und bei "onmouseout" die erzeugte Klasse wieder entfernt, müsste in der CSS-Datei neben der Formatdefinition #Bereich:hover nur zusätzlich #Bereich.hover notiert werden. Damit wäre das Problem gelöst.

Umsetzung:
Leider bin ich nicht genügend mit Javascript vertraut. Durch das Ansprechen von Dokumentelementen als Knoten (nodes) müsste die Aufgabe aber zu lösen sein. Ich suche also ein Javascript, das sämtlichen Knoten innerhald eines Dokumentes die Klasse .hover zuweist, wenn sie mit der Maus überfahren werden.

[Christian Seiler]

Hallo Robert,

Lösungsidee:
Wenn es möglich wäre, ein Javascript zu realisieren, das bei "onmouseover" dem betreffenden Element die CSS-Klasse .hover zuweist und bei "onmouseout" die erzeugte Klasse wieder entfernt, müsste in der CSS-Datei neben der Formatdefinition #Bereich:hover nur zusätzlich #Bereich.hover notiert werden. Damit wäre das Problem gelöst.

div.klasse {
  background: white;
}

div.klasse:hover, div.klasse_hover {
  background: yellow;
}

<div class="klasse" onmouseover="this.className = 'klasse_hover';" onmouseout="this.className = 'klasse';">

Alternativ kannst Du auch die selbstgeschriebene Funktion getElementsByClassName [1] beim onLoad verwenden und allen Elementen dieser Klasse beim Laden der Seite die Eventhandler dynamisch setzen.

Viele Grüße,
Christian

[1] http://www.styleassistant.de/tips/tip100.htm

[Robert Hilbe]

Hallo Christian

Vielen Dank für Deine Lösung! Sie entspricht fast meinen Vorstellungen. Noch besser wäre es, wenn man die Funktion "global" anwenden könnte und sie nicht nur auf die Ersetzung einer bestimmten Klasse beschränkt bleibt. Ich suche also ein Javascript, das sämtlichen Knoten innerhald eines Dokumentes die Klasse .hover zuweist (oder bestehende Klassennamen mit hover ergänzt), wenn sie mit der Maus überfahren werden. Lässt sich so etwas realisieren?

Herzliche Grüsse
Robert

Hallo Robert,

Lösungsidee:
Wenn es möglich wäre, ein Javascript zu realisieren, das bei "onmouseover" dem betreffenden Element die CSS-Klasse .hover zuweist und bei "onmouseout" die erzeugte Klasse wieder entfernt, müsste in der CSS-Datei neben der Formatdefinition #Bereich:hover nur zusätzlich #Bereich.hover notiert werden. Damit wäre das Problem gelöst.

div.klasse {
  background: white;
}

div.klasse:hover, div.klasse_hover {
  background: yellow;
}

<div class="klasse" onmouseover="this.className = 'klasse_hover';" onmouseout="this.className = 'klasse';">

Alternativ kannst Du auch die selbstgeschriebene Funktion getElementsByClassName [1] beim onLoad verwenden und allen Elementen dieser Klasse beim Laden der Seite die Eventhandler dynamisch setzen.

Viele Grüße,
Christian

[1] http://www.styleassistant.de/tips/tip100.htm