Stil mit {stil}

Pseudoklassen :active, :hover, :link, :visited, :focus

IE5 (eingeschränkt) M1.7 N6 Op5 Sa1 CSS1 /CSS2

:active, :hover, :link, :visited und :focus

:active, :hover, :link, :visited und :focus sind für das HTML-Ankertag gedacht und animieren einen Hyperlink je nach Zustand des Links – typischerweise in verschiedenen Hintergrund/Schriftfarben-Kombinationen.
:focus ist darüber hinaus nicht nur für die Animation von Hyperlinks reserviert, sondern kann z.B. auch für die Animation von Eingabefeldern herangezogen werden.

Die Pseudoklassen werden durch einen Selektor, gefolgt von einem Doppelpunkt, gefolgt von der Bezeichnung der Pseudoklasse gebildet:

selector:pseudo-class { eigenschaft: wert; .… } 

und können auch mit einer Klasse oder einem Kontextselektor benutzt werden.

selector.klasse:pseudoclass { eigenschaft: wert; … }

:active

wenn ein Link gewählt wird (solange die Maus auf ihn geklickt ist).

:hover

wenn die Maus über dem Link liegt (mouse over).

:link

ist der Vorgabewert. Bezeichnet einen Link, der nicht aktiv ist und noch nicht besucht wurde.

:visited

wenn ein Link bereits besucht wurde (im Cache des Browsers gespeichert ist).

:focus

wenn ein Element mit der Maustaste geklickt oder durch die Tabulatortaste auf der Tastatur ausgewählt wurde. Bleibt so lange aktiv, bis ein anderes Element geklickt oder durch die Tabulatortaste mit der Tastatur markiert wird.

Bemerkung: Seit CSS2 können Zustände auch miteinander kombiniert werden. Insbesondere kann ein Link, der bereits besucht wurde, erneut ein :hover anzeigen und in der Zeit, in der die Maus ein weiteres Mal auf ihn geklickt wird, den Klick durch eine neue Darstellung anzeigen.

IE7 unterstützt wie schon seine Vorgänger :focus nicht. Im Unterschied zur Version 6 allerdings wendet IE7 jetzt :hover auch auf andere Elemente als auf Links an.

Beispiel: Farbig hinterlegte Links

Die Darstellung von Hyperlinks mit ihren verschiedenen Zuständen gehörte zu den Hits von CSS2 und ersetzt die zahllosen Hintergrundbilder und JavaScripts, die zuvor für eine animierte Navigation gebraucht wurden.

ul.vis a { background: lightyellow; }        /* Noch nicht besuchte Links */
ul.vis a:visited { background: seashell }    /* Bereits besuchte Links */
ul.vis a:hover { background: wheat }         /* Maus hovert über Link */
ul.vis a:focus { background: lavender; }     /* Mausklick bis zum Klick außerhalb */
ul.vis a:active { background: salmon }       /* Mausklick bis zum Verlassen */ 
ul.vis a:visited:hover { background: white } /* Bereits besuchte Links  */
ul.vis a:visited:active { background: tan }  /* Klick auf bereits besuchte Links */

• Home
• CSS
• XHTML
• Javascript
• Artikel

Beispiel: :focus für Eingabefelder

:focus, :hover und :active sind nicht auf die Verwendung mit Links beschränkt.

Wenn ein Formularfeld aktiviert wird (entweder durch einen Mausklick oder durch die Tastatur), soll das Feld durch die CSS-Regel Blau hinterlegt werden.

input:focus { background: lavender; }

Beispiel: Animierte Navigation mit :hover

:hover funktioniert zudem in vielen Browsern auch bei anderen Elementen als Hyperlinks. Internet Explorer unterstützt diese Technik erst ab Version 7.

Die Navigationsleiste besteht aus einer ungeordenten Liste mit Unterlisten. Der Stil display: none unterdrückt die Darstellung der Unterlisten, bis die Maus über ein li-Element hovert. Dann wird die Unterliste durch den Stil display: block sichtbar.

ul.col ul { 
    display: none; 
}
ul.col li:hover ul { 
    display: block; 
    position: absolute; 
    left: 14em; z-index: 10; 
    margin-top: -2em; width: 12em; 
    list-style: none; 
}

• generated content
  • content
  • counter-increment
  • counter-reset
  • quotes
• lists
  • list-style-image
  • list-style-position
  • list-style-type
  • list-style
• visual formatting
  • float
  • clear
  • position
  • top
• visual effects
  • clip
  • overflow
  • visibility
• dimension
  • height
  • width
  • line-height
  • max-height

zurück zum Seitenanfang