Christian Seiler: CSS-Klassen mit Javascript dynamisch ändern

Beitrag lesen

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