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.

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!