Das Pseudoattribut ":hover"

  • Das Pseudoattribut ":hover" Für den HTML-Tag <a> kann man mit Hilfe von CSS vier verschiedene Zustände definieren:

    • <ul> <li>a:link - Für den normalen Zustand
    • <li>a:hover - Wenn man mit der Maus darüberfährt
    • <li>a:active - Der Moment des Klicks
    • <li>a:visited - Für schon besuchte Links

    So lassen sich unterschiedliche, aber wirkungsvolle Effekte erzielen. Im Folgenden ist ein Beispiel aufgeführt: Beispiel einer CSS-Definition <style type="text/css"><!--a { color: white; font-size: 12px;}a:visited { color: #c3c3c3;}a:link { text-decoration: underline;}a:hover { text-decoration: none;background: white; color: #5555DD;}a:active { text-decoration: underline overline; color: red;}--></style>

    Anmerkung: a:visited wurde vor a:hover deklariert, da sonst die Farbe bei einem Link, der schon besucht wurde und man darüberfährt, sich nicht ändert.