Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Untersuchung dynamischer CSS-Pseudoklasseneigenschaften: Hover, Active und Focus

WBOY
Freigeben: 2023-10-21 08:11:08
Original
993 Leute haben es durchsucht

CSS 动态伪类属性探索:hover,active 和 focus

Untersuchung dynamischer CSS-Pseudoklasseneigenschaften: Hover, Active und Focus

Einführung:
Dynamische CSS-Pseudoklasseneigenschaften sind ein wichtiges Werkzeug zum Aufbau von Interaktivität und dynamischen Effekten. Unter diesen sind Hover, Active und Focus die drei am häufigsten verwendeten Pseudoklassenattribute. In diesem Artikel wird die Verwendung dieser drei Pseudoklassenattribute ausführlich vorgestellt und spezifische Codebeispiele bereitgestellt.

  1. hover-Pseudoklassenattribut: Das
    hover-Pseudoklassenattribut wird verwendet, um den Stil anzugeben, wenn sich die Maus über dem Element befindet. Zu den gängigen Anwendungen gehören das Ändern der Farbe von Links, das Anzeigen versteckter Inhalte usw.

Beispielcode:

a:hover {
  color: red;
}

.div:hover {
  display: block;
}
Nach dem Login kopieren

Wenn sich im obigen Beispiel die Maus über dem Link befindet, ändert sich seine Farbe in Rot; wenn die Maus über dem .div-Element fährt, wird es angezeigt (falls vorhanden). ursprünglich verborgen) ).

  1. aktives Pseudoklassenattribut:
    aktives Pseudoklassenattribut wird verwendet, um den Stil anzugeben, wenn die Maus gedrückt wird. Wird normalerweise zum Erstellen von Tastendruckeffekten oder Linkklickeffekten verwendet.

Beispielcode:

.button:active {
  background-color: yellow;
}

a:active {
  color: blue;
}
Nach dem Login kopieren

Wenn im obigen Beispiel die Schaltfläche gedrückt wird, ändert sich ihre Hintergrundfarbe in Gelb. Wenn auf den Link geklickt wird, ändert sich die Farbe des Linktexts in Blau.

  1. Focus-Pseudoklassenattribut: Das
    Focus-Pseudoklassenattribut wird verwendet, um den Stil des aktuell fokussierten Elements anzugeben. Wird hauptsächlich in Formularelementen verwendet, um die Felder zu markieren, die der Benutzer eingibt.

Beispielcode:

input:focus {
  border: 2px solid green;
}

textarea:focus {
  box-shadow: 0 0 5px yellow;
}
Nach dem Login kopieren

Wenn im obigen Beispiel das Eingabefeld den Fokus erhält, wird der Rand grün; wenn das Textfeld den Fokus erhält, wird ein gelber Schatteneffekt angezeigt.

Zusammenfassung:
Dynamische CSS-Pseudoklasseneigenschaften sind ein wichtiges Werkzeug zum Erstellen von Interaktivität und dynamischen Effekten, wobei Hover, Active und Focus die drei häufigsten Pseudoklasseneigenschaften sind. Durch die rationale Verwendung dieser Pseudoklassenattribute können Sie Stiländerungen von Seitenelementen während der Mausinteraktion und des Fokusstatus leicht realisieren. Wir hoffen, dass die obigen Beispiele den Lesern helfen können, diese Attribute besser zu verstehen und zu nutzen, um interaktivere und dynamischere Webseiteneffekte zu erstellen.

Das obige ist der detaillierte Inhalt vonUntersuchung dynamischer CSS-Pseudoklasseneigenschaften: Hover, Active und Focus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage