Wie überschreibe ich „pointer-events: none“ mit der CSS-Eigenschaft „cursor“?

Überschreiben von „pointer-events: none“ mit der CSS-Eigenschaft „cursor“

Beim Versuch, einen Link zu deaktivieren und einen benutzerdefinierten Cursorstil anzuwenden, kann ein Problem auftreten wobei die Cursoreigenschaft davon unberührt bleibt. Dies geschieht aufgrund der Verwendung von „pointer-events: none“, wodurch alle Mausinteraktionen mit dem Element deaktiviert werden.

Um dieses Verhalten zu überschreiben und die Cursoreigenschaft zu ändern, können Sie die Änderungen auf das übergeordnete Element von anwenden der Link. Hier ist ein Beispiel:

HTML

<code class="html"><span class="wrapper">
    <a href="#">Some Link</a>
</span></code>

CSS

<code class="css">.wrapper {
    position: relative;
    cursor: text;  /* This is used */
}
.wrapper a {
    pointer-events: none;
}</code>

Diese Technik ist in den meisten Browsern effektiv. Allerdings kann es bei älteren Versionen des Internet Explorers (IE11) zu Inkonsistenzen kommen. Um die browserübergreifende Kompatibilität sicherzustellen, können Sie dem übergeordneten Element ein Pseudoelement hinzufügen:

<code class="css">.wrapper:after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
}</code>

Mit diesen Änderungen können Sie den Link erfolgreich deaktivieren und gleichzeitig den gewünschten Cursorstil beibehalten.

Das obige ist der detaillierte Inhalt vonWie überschreibe ich „pointer-events: none“ mit der CSS-Eigenschaft „cursor“?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!