Unser Forum:
Zum Webmasterforum - Zum Foren-Archiv
[CSS] Hover
geschrieben von spielewebVorwort: Keine Kenntnisse erforderlich, bis auf HTML (ein bisschen wäre zumindest gut). Kleine CSS-Kenntnisse sind vorteilhaft.
Ihr habt bestimmt schonmal gesehn, bei einer Page, das sich beim darüberfahren über einen Link, der Text geändert - anders ausgesehen hat.
- Tutorial -
> Step 1
Erstelle einen neuen Ordner, und in diesem Ordner eine HTML-datei, in der sich ein Link befindet. Der Link darf nicht formatiert sein!
Schreibe in den bereich folgendes:
.
> Step 2
Nichts hat sich geändert. Logisch, denn wir haben ja noch nichts formatiert.
Zur Linkformatierung:
Es gibt 4 Link Zustände.
:link
Der Grundzustand des Linkes.
:visited
visited, engl: besucht - Die anzeige des Links, wenn er schon mal angeklickt wurde.
:hover
Der Hover - definiert, wie der Link aussehen soll, wenn man ihn gerade mit der Maus "berührt".
:active
... dient dazu, festzulegen, wie der Link aussieht, wenn das Ziel aktuell angezeigt wird... (d.h während die nächste Seite ladet)
Wie definiere ich jedoch den aktuellen Wert?
Hier mal ein Beispiel, wie sowas aussehen könnte.
a:link { text-decoration:none; color:#000000; font-family:Verdana; }
a:visited { text-decoration:none; color:#000000; font-family:Arial; }
a:hover { text-decoration:none; color:#000000; font-weight:bold; font-size: 10pt;}
a:active { text-decoration:none; color:#000000; font-weight:bold; font-style: oblique; background-color: #3994ca; }
text-decoration:none heißt, das der Link NICHT wie sonst immer typisch ist, unterstrichen wird. Man kann das none durch "underline" austauschen - Hieße, das der Link unterstrichen werden soll. "overline" werden die meisten wohl schon erraten: Link wird über der schrift unterstrichen. - Aber Achtung, Netscape unterstützt diese Formatierung nicht!.
"line-trough" ist ebenfalls eine Alternative. Der Link wird in der mitte durchgestrichen.
"blink" gibts auch noch, der Link blinkt irgendwie. Keine Ahnung, wie er blinkt, da ich den Netscape nicht habe. IE unterstützt den blink-befehl nicht - also eine wertlose Formatierung.
color:#000000 sollte klar sein, hierbei ein tipp: Es ist auch ein hübscher Hover, wenn sich nur die Farbe ändert ;-)
font-weight:bold - Je nachdem, in welcher der 4 Linkzustände, wird der Link fett dargestellt.
Andere Möglichkeiten: bolder (dicker), lighter (dünner) und normal.
! Man kann das ganze auch mit Werten von 100 bis 1000 machen, 100 ist dünn, 1000 fett.
font-family:Verdana - Anders als in HTML, wo man font-face schreibt, schreibt man hier font-family. Steht für die Schriftart. Wenn man eine spezielle Schriftart hat, kann man mit "font-family:Spezialschrift, Ersatzschrift; eine Ersatzschrift hinzufügen.
font-style:oblique sagt dem Browser, dass er die Schrift kursiv machen soll. Andere Werte: italic (ebenfalls kursiv!) und normal .
background-color:#3994ca - ja, einen background gibts auch bei schriften. Es wird der engste Bereich um die Schrift erfasst und mit Farbe gefüllt. Ich finde persönlich, dass es sch... aussieht *g*
font-size: 10pt: Damit kann man die Schrift eine bestimmte größe zuordnen. Ist ganz witzig, wenn die Schrift des Links beim drüberfahren eine andere Größe haben. Tipp für "Funpages"!
--> Das wars! Hoffentlich sind nun auch bei deiner Page die Zeiten mit den Langweiligen standartlinks vorbei :-)
Wir bedanken uns bei Clasher für die Bereitstellung dieses Tutorials.
Andere Webmaster-Seiten:
Homepage Tools - Webmaster Verzeichnis
Kostenloses für Webmaster:
Kostenloses Gästebuch - Kostenloser Newsletter - Kostenloses Forum - Kostenloser Besucherzähler