76.
Linkformatierung mit CSS (24.12.2001)
Einer der ersten StyleAssistant-Tipps war die Realisierung von Buttons ohne Grafik.
Dazu muss man nicht unbedingt JavaScript bemühen, wie der folgende Ansatz zur Linkformatierung mit CSS pur zeigen soll. Im Beispiel 76 werden A-Elemente innerhalb von SPAN-Elementen platziert und mit CSS-Klassen verbunden. Beim Berühren der Links mit dem
Mauszeiger wird der HOVER-Effekt auf das jweilige SPAN-Element angewendet. Neben Farbänderungen werden auch Rahmenformate ausgetauscht.
.linkformat3
{
Color: #0000CC;
Background-Color: #FFFFFF;
Border: none;
}
.linkformat3 A:HOVER
{
Color: #FFFFFF;
Background-Color: #009900;
Border-Left: 1px solid #CCCCCC;
Border-Top: 1px solid #CCCCCC;
Border-Right: 2px solid #000000;
Border-Bottom: 2px solid #000000;
Text-Decoration: none;
}
Erfreulicherweise sind alle neueren Browser mittlerweile in der Lage, diese Effekte umzusetzen.
|