Robert Hilbe: CSS-Klassen mit Javascript dynamisch ändern

Beitrag lesen

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