Links mit Bildern durch CSS
April 22, 2007
Ich stand gerade vor dem Problem, das jeder Link mit einem kleinen Pfeil ausgestattet werden sollte. Im Ursprungszustand soll dieser Pfeil grau sein und beim Hover-Zustand weiß:
Da ich jetzt nicht hinter jeden Link noch ein Bild einfügen wollte musste eine andere Lösung her und zwar wollte ich das ganze mit CSS lösen. Nach ein wenig Frickelei war es dann geschafft:
-
a:link {
-
color:#7f7f7f;
-
text-decoration:none;
-
background-image: url(../img/arrow-grey.gif);
-
background-repeat: no-repeat;
-
background-position:100% 54%;
-
margin-right:10px;
-
padding-right: 10px;
-
}
-
a:visited {
-
color:#7f7f7f;
-
text-decoration:none;
-
background-image: url(../img/arrow-grey.gif);
-
background-repeat: no-repeat;
-
background-position:100% 54%;
-
margin-right:10px;
-
padding-right: 10px;
-
}
-
a:hover {
-
color:#FFFFFF;
-
text-decoration:none;
-
background-image: url(../img/arrow.gif);
-
background-repeat: no-repeat;
-
background-position:100% 54%;
-
margin-right:10px;
-
padding-right: 10px;
-
}
Hier noch die beiden Grafiken zum nachbauen:
Filed under: HTML | CSS | Comments (0)