CSS – Hover Effekt Teil 1
Links sollen NICHT unterstrichen dargestellt werden und beim Mouse Over soll die Linkfarbe wechseln.
<html> <head> <style type="text/css"> a:link{ color:#00CC66; text-decoration: none } a:visited{ color:#ff0000; text-decoration: none } a:hover{color:#f00000; text-decoration: none } a:active{color:#f00000; text-decoration: none } </style> </head> <body> <a href="dein_link.html">Dein Link</a> </body> </html>
Erklärungen:
a:link definiert das Aussehen des Links wenn nichts passiert, also die Mouse ausserhalb des sensitiven Bereichs des Links ist.
Mit dem Attribut color: #00CC66 wird die Farbe festgelegt.
a:hover definiert das Aussehen des links, wenn der Internet-User mit der Mouse über den Link fährt.
Mit dem Attribut color: #FF0000 wird die Farbe festgelegt.
a:active definiert das Aussehen des Links, wenn der Link aktiviert wird, also – wenn der User auf den Link klick.
Mit dem Attribut color: #F00000 wird die Farbe festgelegt.
a:visited definiert das Aussehen des Links, wenn der User den Link schon einmal mit dem Browser aufgerufen (oder besucht) hat.
Mit dem Attribut color: #000000 wird die Farbe festgelegt.
text-decoration: none heisst in diesem Fall, das der Link-Text nicht unterstrichen werden soll.