In diesem Artikel erläutern wir die Verwendung der CSS-Eigenschaft pointer-events.
Was ist die Pointer-Events-Eigenschaft?
CSS“ Zeigerereignisse ”-Eigenschaft gibt das Verhalten des Zeigers/Tippens auf das HTML-Element an und ob das ausgewählte Element durch Ausführen von Aktionen wie Hover oder Klicken reagiert.
Wie verwende ich die Eigenschaft pointer-events?
In CSS kann die Eigenschaft pointer-events verwendet werden, um Zeigeraktionen für bestimmte HTML-Elemente zu aktivieren oder zu deaktivieren. Die Syntax der Eigenschaft pointer-events ist unten angegeben.
Syntax
Zeigerereignisse : keiner | Auto ;
In der erwähnten Syntax „ Auto “ ist der Standardwert der Eigenschaft pointer-events und aktiviert die Zeigeraktion auf ein Element, und „ keiner „ist das komplette Gegenteil zum Auto; Es deaktiviert die Zeigeraktion auf HTML-Elementen.
Lassen Sie uns weitermachen und ein Beispiel nehmen, um die Eigenschaft pointer-events zu verstehen.
Beispiel 1
Geben Sie in unserer HTML-Datei ein Anchor-Tag mit dem Text „ LinuxHint.io “ und platzieren Sie es im Körperbereich.
HTML
< a href = „https://www.linuxhint.io/“ > LinuxHint.io < / a >Jetzt verwenden wir das „ Zeigerereignisse „Eigenschaft und ihm Wert zuweisen“ keiner “. Dadurch wird die Zeigeraktion auf dem Element deaktiviert.
CSS
a {Zeigerereignisse : keiner ;
}
Speichern Sie Ihre HTML-Datei mit dem erwähnten Code und führen Sie sie mit Ihrem Browser aus:
Nehmen wir ein weiteres Beispiel, um die Eigenschaft pointer-events ausführlich zu behandeln.
Beispiel 2
Setzen Sie den Eigenschaftswert pointer-events auf „ Auto ' diesmal. Dadurch reagiert das Element auf das Bewegen oder Klicken des Mauszeigers. Nichtsdestotrotz ist auto der Standardwert der Eigenschaft pointer-events.
CSS
a {Zeigerereignisse : Auto ;
}
Ausgabe
Wir haben verschiedene Verwendungen der CSS-Eigenschaft pointer-events behandelt.
Fazit
Um die Zeigeraktionen zu steuern, können wir das CSS „ Zeigerereignisse ' Eigentum. Das ' Auto ” value ist der vordefinierte Wert dieser Eigenschaft; es ermöglicht die Aktionen über die HTML-Elemente. Wenn die Eigenschaft pointer-events mit dem Wert „ keiner “, deaktiviert es die Aktionen für ein bestimmtes Element. Dieser Artikel hat gezeigt, wie die CSS-Eigenschaft pointer-events verwendet wird.