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

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>

CSS:

.container {
  cursor: pointer;
}
.container a {
  pointer-events: none;
  color: blue;
}

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.