CSS Links: Listige Links

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

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)

This entry was posted in HTML Tricks. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *