Sie sind hier: Home > Tricks > HTML & CSS > CSS Links: L...

CSS Links: Listige Links

Stand vom 20.05.2002
Mit Listen lässt sich auch so einiges machen. Diese listigen Links sind mit CSS und klein wenig JavaScript schnell gemacht...

Fachbegriffe
 Linktipps
 GPS Navigation   Webhosting inkl. Domain für Einsteiger und Profis.   AWD Erfahrung

Normale HTML Listen sind einfach langeweilig, doch das kann mit ein wenig CSS und JavaScript verhindern. Diese Listenlinks haben Stil.

<li onmouseover="this.style.color='green'"
onmouseout="this.style.color=''" style="color : black"> <a href="#">Link 3 </a></li>

Die Styleeigenschaft der Liste wird über JavaScript angesprochen. Beim Event "onmouseover" soll die Farbe auf Grün (green) wechseln, bei "onmouseout" auf die Standardfarbe.

Eine andere Möglichkeit ist, das der Typ des Bullets verändert wird.


<ul style="list-style-type: square">
<li onmouseover="this.style.listStyleType='disc'; this.style.color='red'"
onmouseout="this.style.listStyleType='square'; this.style.color='blue'" style="color: blue;">
<a href="seite.htm"><u>Link 1</u></a></li></ul>

Bei der Liste ändert sich nicht nur die Farbe, sondern auch der Bullettyp.
onmouseover="this.style.listStyleType='disc';"
Der Typ wird über JavaScript angesprochen, und verändert. (tf)