Links
Durch die CSS Pseudoklasse ':hover' lassen sich praktisch alle Eigenschaften eines a-Tags ändern, Schriftfarbe, Schriftgrösse, Hintergrund, Rahmen, Textdekoration, Buchstabenabstände, etc. CSS lässt sogar Mouse-Over Effekte (ohne JavaScript) zu!
Diese Reihenfolge der Pseudoeklassen muss eingehalten werden, sonst funktionierts nicht richtig!
Eselsbrücke: Lo Ve H Ate
Diese Möglichkeiten erlauben es, die typischen Kennzeichen von Links wie blaue Schriftfarbe und Unterstreichung zu verändern. Links sollten jedoch immer gut erkennbar sein!
a:link, a:visited, a:hover, a:active
Mouse-Over Text
Auf das Anker Element angewendet, wirkt der Style auf alle Links:
a:link, a:visited { color: #00008b; font-size: 14pt; text-decoration: underline overline;}
a:hover { color: #fff; background-color: #66ccff; font-size: 14pt; text-decoration: none;}
a:active { color: blue;}
Das ist der oben beschriebene Link Es gibt unzählige Möglichkeiten Links zu stylen.
Auf eine Klasse angewendet, wirkt der Style nur auf die klassifizierten Links (Das Element a durch einen .Klassennamen ersetzen):
.li1:link { color: #fff; background-color: brown; font-weight: bold; text-decoration: none;
border-style: solid; border-width: thick; border-color: #808000 #bdb76b; padding: 5px;}
.li1:visited { color: #fff; background-color: brown; font-weight: bold; text-decoration: none;
border-style: solid; border-width: thick; border-color: #808000 #bdb76b; padding: 5px;}
.li1:hover { background-color: #cc0000; border-style: solid; border-width: thick;
border-color: #bdb76b #808000; padding: 5px;}
.li1:active { background-color: #cc0000; border-style: solid; border-width: thick;
border-color: #bdb76b #808000; padding: 5px;}
Das ist ein klassifizierter Link
Durch Rahmen und Hintergrundfarbe gestylt.
Zu beachten ist dabei, dass der Stil dem Link zugeordnet wird und nicht dem Link-Text!
Die Anker-Tags müssen direkt den Linktext umgeben, nichts darf dazwischen sein; keine anderen Tags.
Falsch wäre: <a href="..." class="li1"><b>So funktioniert es nicht Link</b></a>
Mouse-Over Hintergrund-Bilder
background-image:
Durch die Pseudoklasse :hover lassen sich auch Hintergrundbilder ersetzen. Das ergibt einen Mouseover-Bildeffekt, wie er sonst nur durch Javascript zu erzielen ist. Es erfordert im :link jedoch mitunter eine schwierige Anpassung von Schriftgrösse und Padding an das Bild, da das Hintergrundbild keine eigene Grösse besitzt.
.li5:link, .li5:visited { background: url(images/butn_read.gif) no-repeat; padding: 0px 20px; text-decoration: none;}
.li5:hover { background: url(images/butn_write.gif) no-repeat;}
.li5:active { background: url(images/butn_ok.gif) no-repeat; }
.li2:link, .li2:visited { color: #fff; padding:10px 9px; background-image: url(images/button_dunkel.png); text-decoration: none;}
.li2:hover, .li2:active { color: #000; background-image: url(images/button_hell.png);}
.li4:link, .li4:visited { background: url(images/skull_pos.jpg) no-repeat; padding: 30px 40px; line-height:60px; text-decoration: none;}
.li4:hover, .li4:active { background: url(images/skull_neg.jpg) no-repeat;}
Das Hintergrundbild sieht man nur im Grössenbereich des Inhaltes, darum brauchen wir ein Padding in der Höhe und in der Breite, die line-height sorgt dafür, dass die Zeilen darüber und darunter nicht hinter das Bild rutschen.
Der Link siehts so aus:
<a href="bilder_hintergrund.php" class="li4"> </a>
Für den IE darf er nicht leer sein, wesshalb der Inhalt entweder ein forcierter Leerschlag ist ( ) und im Style die Linkunterstreichung vermieden wird (text-decoration:none;), oder das padding-left schiebt den Linktext rechts neben das Bild. Eine weitere Möglichkeit, aber schwierig auszurichten, wäre auch ein transparentes gif ohne Rahmen.
Bei einem Bildwechsel sollte das Overbild vorgeladen werden, damit es nicht zu einer Anzeigeverzögerung kommt.
Ohne Javascript geht das einfach, indem das Bild mit den Massen 0px oder in einem unsichtbaren Bereich geladen wird:
<span style="display:none"><img src="images/skull_neg.jpg" alt="Bild vorladen" width="0px" height="0px" border="0px"></span>
Sprite
Die Sprite Technik tauscht nicht das Hintergrundbild aus, sondern sie verschiebt es. Dadurch, dass wir nur Bildausschnitte ein und des selben Bildes zeigen, brauchen wir kein zweites Bild vorzuladen (aber ein wenig länger beim erstenmaligen Laden.)
Das Sprite-Bild als Ganzes.
a.sprite { display:block; width: 105px; height: 114px;
background-image:url("images/sprite.jpg"); background-repeat:no-repeat;
background-position: 0px 0px;
}
a.sprite:hover { background-position: -105px 0px; }
Auf der Seite über >> Navigationen werden wir Links in Listen begegnen.
Über Hintergrundbilder allgemein siehe >> Hinterrundbilder.
Sogar eine reine CSS >> Bildgalerie (ohne Javascript) ist machbar.
Hover über Alles
tr:hover
Inzwischen können die gängigen Browser die Pseudoklasse :hover auch auf andere Elemente anwenden, nicht nur auf den Anker (a-Tag), sondern auch auf Tabellen-Zeilen oder -Zellen, auf ganze Absätze oder Titel, etc., aber bevor ich etwas relevantes probiere, würde ich es doch noch mal mit allen relevanten Browser ausprobieren.
Siehe Oder bei den Selektoren nachlesen:
Check den Code.