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.
