Trickkiste: Listenzeichen mit Mauseffekt

von Fries Websolutions

Das macht nur JavaScript möglich, das durch die Mausberührung auch Listen darauf reagieren, und das auf ganz verschiedene Art und Weise.

Listenzeichen von rund zu hohl wechseln

• Bengel
• Soldat
• Arzt
• König

<UL onmouseover="this.style.listStyleType='circle'" onmouseout="this.style.listStyleType=''">
<LI>Bengel
<LI>Soldat
<LI>Arzt
<LI>König</LI></UL>

Von hohl zu eckig wechseln

• Bengel
• Soldat
• Arzt
• König

<UL onmouseover="this.style.listStyleType='square'" onmouseout="this.style.listStyleType='circle'">
<LI>Bengel
<LI>Soldat
<LI>Arzt
<LI>König</LI></UL>

Farbe komplett wechseln

• Bengel
• Soldat
• Arzt
• König

<UL onmouseover="this.style.color='red'"
onmouseout="this.style.color=''">
<LI >Bengel
<LI>Soldat
<LI>Arzt
<LI>König</LI></UL>

Farbe nur für die Listenzeichen wechseln

• Bengel
• Soldat
• Arzt
• König

<ul onmouseover="this.style.color='blue'" onmouseout="this.style.color=''">
<li onmouseover="this.style.color='green'" onmouseout="this.style.color=''"style="color : red"><div style="color : black">Bengel</div></li>
<li onmouseover="this.style.color='powderblue'" onmouseout="this.style.color=''"style="color : red"><div style="color : black">Soldat</div></li>
<li onmouseover="this.style.color='maroon'" onmouseout="this.style.color=''"style="color : red"><div style="color : black">Arzt</div></li>
<li onmouseover="this.style.color='silver'" onmouseout="this.style.color=''"style="color : red"><div style="color : black">König</div></li>
</ul>

Das ist für IE und Mozilla kein Problem, aber Netscape 4 muss wegen mangelnder CSS-Fähigkeiten noch passen und Opera schwächelt auch noch im Javascript.

Artikel, die auch uns interessieren könnten:

Trickkiste - inside / outside
Die Listen sind nicht neu, aber dennoch unverzichtbar, denn wenn die Aufzählungen längere Texte enthalten, dann werden diese bündig nach dem Listenzeichen dargestellt.