Was ist der Unterschied zwischen „Fokus“ und „aktiv“

“:FokusDie Pseudoklasse wird verwendet, um die CSS-Eigenschaften für den Zustand eines Elements zu definieren, wenn die Aktion darauf ausgeführt wurde oder ein Element ausgewählt wurde. Andererseits die “:aktiv”Pseudo-Klasse definiert die CSS-Eigenschaften für die Instanz, wenn die Aktion ausgeführt wird, und sie wird im Allgemeinen ausgelöst, wenn der Benutzer ein bestimmtes Element klickt oder auswählt.

Dieser Beitrag wird die Arbeit der "demonstrieren" demonstrieren:Fokus" Und ":aktivPseudoklassen und der Unterschied zwischen ihnen.

: Fokus vs: aktiv

Der ":aktiv”Wird genau zum Zeitpunkt oder zum Beispiel genau ausgelöst. Der Benutzer klickt auf ein Element und verschwindet, wenn der Benutzer den Mausklick verlässt. Zum Beispiel wird es ausgelöst, wenn eine Schaltfläche angeklickt wird und der Effekt verschwindet, wenn die Maus frei eingestellt ist. Nach dem Ereignis (ein Schaltflächenklick) hat der Effekt der Eigenschaften jedoch in "hinzugefügt:Fokus”Pseudo-Klasse bleibt Reste.

Beispiel: Erstellen einer Schaltfläche mit: Fokus und: aktiv

Lassen Sie uns dies mit einem einfachen praktischen Beispiel verstehen, indem Sie eine Schaltfläche erstellen und dann das hinzufügen ":Fokus" Und ":aktivPseudoklassen:

Die Farbe dieses Textes ändert sich, wenn Sie auf diese Schaltfläche klicken
Es wird beim Klicken als mutiger Text angezeigt

Im obigen Code -Snippet:

• Es gibt eine Div -Klasse namens “meine Klasse”. Der Zweck des Div -Elements, das diese Klasse enthält.
• Dann gibt es eine "”Tag zum Erstellen einer Schaltfläche und zwischen den Schaltflächen -Tags des Öffnungs- und Schließens wird der Text auf der Schaltfläche angezeigt.

Der ":Fokus" Und ":aktivPseudoklassen für das obige HTML-Code-Snippet können im CSS-Stil wie folgt hinzugefügt werden:

Taste
Schriftgewicht: normal;
Farbe: Schwarz;
Rand: 30px;

Taste: Fokus
Farbe: Fuchsia;

Taste: aktiv
Schriftdicke: fett;

.meine Klasse
Text-Align: Mitte;

Im CSS -Stil oben:

• Es gibt einen Selektor, der sich auf das Schaltflächenelement bezieht, in dem die CSS -Eigenschaften, ich.e., “Schriftgewicht","Farbe" Und "Rand”Wurden definiert.
• Im "Taste: Fokus"Pseudoklasse, der Wert der"Farbe"Eigenschaft ist definiert als"Fuchsie”. Dadurch wird die Farbe des Textes auf „Fuchsia“ umgewandelt, wenn die Schaltfläche klickt.
• Im "Taste: aktiv"Pseudoklasse, die"Schriftgewicht"CSS -Eigenschaft ist als" definiert als "deutlichDies fett.
• Als nächstes bezieht sich der hinzugefügte Klassenwählte auf das DIV -Element und das “Text-Align: Mitte”CSS -Eigenschaft wurde hinzugefügt, um die im Div -Element erstellte Taste auf die Mitte auszurichten.

Der ":Fokus" Und ":aktiv”Pseudoklassen funktionieren in Abstimmung mit den Eigenschaften folgendermaßen:

Hier ging es um die Funktionalitäten der “:Fokus" Und ":aktivUnd der Unterschied zwischen ihnen.

Abschluss

Der ":Fokus" Und ":aktivPseudoklassen werden verwendet, um die CSS-Eigenschaften für die Elemente in den Fällen zu definieren, in denen ein bestimmtes Ereignis auf einem HTML-Element durchgeführt wird. Der Effekt der in der Pseudo-Klasse „: aktiven“ Pseudo-Klasse definierten Eigenschaften verschwindet sofort nach dem Ereignis wie einem Mausklick, aber der Effekt der in der Pseudo-Klasse „Focus“ definierten Eigenschaften nach dem Ereignis, das auf dem Element durchgeführt wurde.