Wie man mit CSS3 arbeitet Event Selektoren - Dummies

Die meisten CSS3-Änderungen sind statisch - Sie fordern den Browser auf, nach bestimmten Tags, Attributen oder Mustern zu suchen. Ereignisselektoren wählen jedoch Objekte basierend auf einem bestimmten Ereignis, z. B. einem Mauszeiger.

Wenn der Benutzer den Mauszeiger über ein Objekt bewegt, ändert sich die Formatierung des Objekts, um anzuzeigen, dass das Ereignis eingetreten ist. Wenn der Benutzer den Mauszeiger von dem Objekt wegbewegt, kehrt die Formatierung zu normal zurück. Die folgende Liste enthält Informationen zu Ereignisselektoren, die von Dokumenten häufig verwendet werden.

• : hover: Wählt ein Objekt aus, wenn der Mauszeiger darüber bewegt wird. Normalerweise verwenden Entwickler diese Funktion, um anzuzeigen, dass ein Element ausgewählt ist oder Details zu einem Objekt angezeigt werden. Diese Funktion wird häufig bei Menüsystemen verwendet, um die Untermenüpunkte anzuzeigen.

• : focus: Wählt ein Objekt aus, wenn das Objekt den Eingabefokus (Tastatur) hat. Es wird häufig mit Formularen verwendet, um anzuzeigen, welches Feld für die Eingabe ausgewählt ist. Eine interessante Verwendung dieses Selektors besteht darin, das ausgewählte Feld in einer größeren Schriftart anzuzeigen, um die Eingabe zu erleichtern.

Ereignisselektoren sind praktisch, weil Sie sie so verwenden können, dass sie so aussehen, als ob die Seite mit dem Benutzer interagiert, ohne auch nur eine Codezeile zu schreiben. Alles geschieht als Teil eines Stils. Die folgende Prozedur zeigt eine Möglichkeit, Ereignisselektoren zu verwenden, um einen visuellen Effekt zu erzielen.

1. Erstellen Sie das ExternalCSS. HTML und ExternalCSS. CSS-Dateien und kopieren Sie sie in einen neuen Ordner.

2. Öffnen Sie ExternalCSS. CSS.

3. Geben Sie den folgenden Code nach den vorhandenen Stilen ein und speichern Sie die Änderungen auf der Festplatte.

   p: schweben, h1: schweben {text-decoration: none; Schriftfamilie: "Arial", Sans-Serif; Schriftgröße: xx-groß; Farbe: Blauviolett; Hintergrundfarbe: Plum;}
   

4. Laden Sie die Testseite erneut.

5. Bewegen Sie den Mauszeiger über den Absatztext.

   Sie sehen den Effekt der Änderung des Stils. Der Stil des Textes ändert sich entsprechend den Auswahlkriterien.

   

6. Bewegen Sie die Maus über den Kopftext.

   Der Absatztext kehrt zum normalen Text zurück, und der Kopftext entspricht nun den Auswahlkriterien. Sie können diesen Ansatz mit jedem beliebigen Objekt auf dem Bildschirm verwenden und jede gewünschte Änderung vornehmen.