Zustandspseudoklassen

2.1 Pseudoklasse :hover

Zustandspseudoklassen ermöglichen es, Stile auf Elemente basierend auf ihrer Interaktion mit dem Benutzer oder ihrem aktuellen Zustand anzuwenden. Diese Pseudoklassen werden häufig verwendet, um die Benutzeroberfläche zu verbessern und geben visuelles Feedback auf Benutzeraktionen.

Die Pseudoklasse :hover wird auf ein Element angewendet, wenn der Benutzer den Mauszeiger darüber bewegt.

Syntax:

    
      selektor:hover {
        eigenschaften: werte;
      }
    
  

Beispiel:

In diesem Beispiel ändert der Link die Farbe und fügt eine Unterstreichung hinzu, wenn der Cursor darüber schwebt, und der Button ändert die Hintergrund- und Textfarbe.

    
      /* Stilisierung des Links beim Überfahren mit der Maus */

      a:hover {
        color: red;
        text-decoration: underline;
      }

      /* Stilisierung des Buttons beim Überfahren mit der Maus */

      button:hover {
        background-color: #3498db;
        color: white;
      }
    
  

2.2 Pseudoklasse :focus

Die Pseudoklasse :focus wird auf ein Element angewendet, wenn es den Fokus erhält, z.B. durch Klicken auf ein Formularelement oder durch Navigieren mit der Tab-Taste.

Syntax:

    
      selektor:focus {
        eigenschaften: werte;
      }
    
  

Beispiel:

In diesem Beispiel ändert das Eingabefeld die Rahmenfarbe und entfernt die Umrandung bei Fokus, und das Textfeld ändert die Hintergrundfarbe.

    
      /* Stilisierung des Eingabefeldes bei Fokus */

      input:focus {
        border-color: blue;
        outline: none;
      }

      /* Stilisierung des Textfeldes bei Fokus */

      textarea:focus {
        background-color: #f0f0f0;
      }
    
  

2.3 Pseudoklasse :active

Die Pseudoklasse :active wird auf ein Element angewendet, wenn es vom Benutzer aktiviert wird, z.B. durch Mausklick. Diese Pseudoklasse wird häufig verwendet, um visuelles Feedback bei Klick auf Interface-Elemente zu geben.

Syntax:

    
      selektor:active {
        eigenschaften: werte;
      }
    
  

Beispiel:

In diesem Beispiel ändert der Link die Farbe beim Klicken, und der Button ändert die Hintergrundfarbe und verkleinert sich leicht, um einen Klick-Effekt zu erzeugen.

    
      /* Stilisierung des Links beim Klicken */

      a:active {
        color: green;
      }

      /* Stilisierung des Buttons beim Klicken */

      button:active {
        background-color: #2980b9;
        transform: scale(0.98);
      }
    
  

2.4 Pseudoklasse :visited

Die Pseudoklasse :visited wird auf Links angewendet, die der Benutzer bereits besucht hat. Sie ermöglicht es, besuchte Links anders als nicht besuchte Links zu stilisieren.

Syntax:

    
      selektor:visited {
        eigenschaften: werte;
      }
    
  

Beispiel

In diesem Beispiel ändert ein besuchter Link die Farbe zu Lila, um sich von nicht besuchten Links zu unterscheiden:

    
      /* Stilisierung des besuchten Links */

      a:visited {
        color: purple;
      }
    
  

2.5 Kombination von Pseudoklassen

Zustandspseudoklassen können kombiniert werden, um komplexe interaktive Stile zu erstellen. Zum Beispiel kann man verschiedene Stile für Links je nach ihrem Zustand festlegen.

Beispiel einer vollständigen Implementierung

In diesem Beispiel ändern sich die Stile der Links je nach ihrem Zustand: Grundzustand, besuchte Links, Links beim Überfahren mit der Maus und Links beim Klicken:

    
      /* Grundstil für Links */

      a {
        color: blue;
        text-decoration: none;
      }

      /* Stilisierung des besuchten Links */

      a:visited {
        color: purple;
      }

      /* Stilisierung des Links beim Überfahren mit der Maus */

      a:hover {
        color: red;
        text-decoration: underline;
      }

      /* Stilisierung des Links beim Klicken */

      a:active {
        color: green;
      }