Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie wende ich Cursorstile an, wenn Hover-Ereignisse mit „pointer-events: none' deaktiviert werden?

Linda Hamilton
Freigeben: 2024-11-05 10:23:02
Original
856 Leute haben es durchsucht

How to Apply Cursor Styles When Disabling Hover Events with `pointer-events: none`?

Cursor-Eigenschaft beim Deaktivieren von Hover-Ereignissen mit Zeigerereignissen hinzufügen: keine

Das Deaktivieren von Hover-Ereignissen mithilfe von Zeigerereignissen: Keine kann manchmal verhindern Anwendung von Cursorstilen. Dies liegt daran, dass pointer-events: none das Element effektiv für Mausinteraktionen unsichtbar macht, einschließlich der Änderung des Cursorstils.

Um dieses Problem zu beheben, sollte die Cursoreigenschaft auf ein übergeordnetes Element angewendet werden, das das Element mit Zeiger enthält -Ereignisse: keine. Dadurch kann der Cursorstil auf das übergeordnete Element angewendet werden, während Hover-Ereignisse für das untergeordnete Element weiterhin deaktiviert werden.

Beispiel:

HTML:

<div class="container">
  <a href="#">Link</a>
</div>
Nach dem Login kopieren

CSS:

.container {
  cursor: pointer;
}
.container a {
  pointer-events: none;
  color: blue;
}
Nach dem Login kopieren

In diesem Beispiel wird die Cursor-Eigenschaft auf die .container-Klasse angewendet, die das Link. Dadurch kann sich der Cursor in einen Zeiger verwandeln, wenn Sie mit der Maus über den Container fahren, auch wenn auf den Link selbst „pointer-events: none“ angewendet wurde.

Beachten Sie, dass es bei Verwendung dieses Ansatzes zu Browser-Inkonsistenzen kommen kann. In IE11 kann beispielsweise ein Pseudoelement erforderlich sein, um die Kompatibilität sicherzustellen. Die Breite und Höhe dieses Pseudoelements sollte auf 100 % und seine Position auf absolut eingestellt sein, sodass es den gesamten Bereich des übergeordneten Elements abdeckt.

Das obige ist der detaillierte Inhalt vonWie wende ich Cursorstile an, wenn Hover-Ereignisse mit „pointer-events: none' deaktiviert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage