OnMouseOver - Style eines Elements

[Gunnar Bittersmann]

@@Jeremy:

nuqneH

Vielen Dank! Im Anschluss werde ich den nun korrekten Code anfügen - als Lernbeispiel, falls jemand ähnlich doof sein sollte wie ich. ;)

Das war ein guter Zug von dir.

Aber es gibt noch einiges mehr zu lernen.

PS: optional können für die Container auch 2 CSS-Klassen "active" und "usual" angelegt werden, welche dann per

document.getElementById(ID).className = 'active'

> gewechselt werden können.  
  
Das wäre eine Verbesserung. Keine Werte per style-Objekt ändern, sondern saubere Trennung: JavaScript steuert die Programmlogik, CSS die damit verbundene veränderte Ausgabe. Schlag nach bei [[Cheatah](http://community.de.selfhtml.org/zitatesammlung/zitat1940)].  
  
Eine weitere Verbesserung wäre die Trennung von HTML und JavaScript: keine @onmouseover-Attribute im Markup, sondern Registrierung der Eventhandler im JavaScript. Schlag nach bei [[molily1](http://molily.de/js/event-handling-grundlagen.html)].  
  
Und auch nicht mehrere Eventhandler (einen für jedes 'li'-Element), sondern einen fürs 'ul'-Element und Event-Delegation. Schlag nach bei [[molily2](http://molily.de/js/event-handling-effizient.html)].  
  
  
Der nächste Schritt nach der Verbesserung des JavaScript-Codes könnte dessen Entsorgung sein, denn der Effekt lässt sich auch mit CSS allein realisieren:  
  
Markup:  
~~~html
<ul id="yearsgoby">  
  <li>2008  
    <div>Foo</div>  
  </li>  
  <li>2009  
    <div>Bar</div>  
  </li>  
  <li>2010  
    <div>Lorem ipsum</div>  
  </li>  
</ul>

Stylesheet:

#yearsgoby div  
{  
  display: none;  
}  
  
#yearsgoby li:hover div  
{  
  display: block;  
  position: absolute;  
  left: 42px;  
  top: 42px;  
}

Qapla'