Wie behalte ich den Cursor-Stil bei, während ich die Link-Interaktivität mit „pointer-events: none“ deaktiviere?

Cursorstil mit „pointer-events: none“ beibehalten

Das Deaktivieren der Interaktivität eines Links mithilfe von „pointer-events: none“ kann zu Konflikten führen Änderungen der Cursoreigenschaften. Dies liegt daran, dass „pointer-events: none“ alle Mausinteraktionen mit dem Element verhindert, einschließlich Cursoränderungen.

Um dieses Problem zu beheben, können Sie die Cursoreigenschaft auf das übergeordnete Element anstelle des Links selbst anwenden. Auf diese Weise wird die Cursoränderung wirksam, während die deaktivierte Interaktivität des Links erhalten bleibt.

Beispiel:

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

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

Es bestehen jedoch bestimmte Browser-Inkonsistenzen . Um die Kompatibilität mit IE11 sicherzustellen, müssen Sie möglicherweise ein Pseudoelement hinzufügen:

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

Dieses Pseudoelement ermöglicht die Textauswahl in Firefox und ermöglicht den Cursorwechsel in Chrome, ohne die Interaktivitätsdeaktivierung zu beeinträchtigen.

Das obige ist der detaillierte Inhalt vonWie behalte ich den Cursor-Stil bei, während ich die Link-Interaktivität mit „pointer-events: none“ deaktiviere?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!