Fügen Sie die CSS-Cursoreigenschaft hinzu, wenn Sie "Zeigerereignisse: keine" verwenden.

Ich versuche, einen bestimmten Link zu deaktivieren und den Cursorstil anzuwenden, aber dieser CSS-Befehl cursor: text;wirkt sich nicht aus. Der Cursor ist immer Standard. Ich verwende die neueste Firefox-Version.

CSS:

pointer-events: none !important;
cursor: text;
color: Blue;

Mit pointer-events: nonewerden alle Maus - Interaktionen deaktivieren mit diesem Element. Wenn Sie die cursorEigenschaft ändern möchten, müssen Sie die Änderungen auf das übergeordnete Element anwenden. Sie können den Link mit einem Element umschließen und die cursorEigenschaft hinzufügen .

Beispiel hier

HTML

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

CSS

.wrapper {
    position: relative;
    cursor: text;  /* This is used */
}
.wrapper a {
    pointer-events: none;
}

Es gibt jedoch einige Browser-Inkonsistenzen. Damit dies in IE11 funktioniert, benötigen Sie anscheinend ein Pseudoelement. Mit dem Pseudoelement können Sie auch den Text in FF auswählen. Seltsamerweise können Sie den Text in Chrome ohne ihn auswählen.

Beispiel aktualisiert

.wrapper:after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
}

Die ursprüngliche Frage ist schon ziemlich lange her, aber dies ist meine Lösung ohne Wrapping-Element und Cursor ohne Zeigerereignisse:

<!-- Add tabindex="-1" so that element cannot be reached by keyboard -->
<a href="url" class="disabled" tabindex="-1" onfocus="this.blur()">Disabled link</a>

CSS:

/* Adding cursor just works: */
.disabled {
    cursor: not-allowed;
}

/* Makes link non-clickable: */
.disabled:active {
    pointer-events: none;
}

CodePen-Beispiel

BEARBEITEN:

• Chrome hat begonnen, sich auf das Klicken auf Elemente mit dem Attribut tabindex zu konzentrieren (auch mit tabindex = "- 1"). Die schnellste Lösung besteht darin onfocus="this.blur()", das Element unscharf zu stellen.
• Sie müssen verhindern, dass das Element fokussiert wird, da es sonst durch die Eingabetaste aktiviert werden kann

Durch die Angabe pointer-events:noneerklären Sie aktiv, dass keine Mausinteraktion zwischen dem Element und dem Cursor besteht. Daher kann es auch keinen Cursor haben - es ist für alle Mausverhalten unsichtbar .

Beweis hier zu finden .

Entfernen pointer-events: none !important;. Deaktivieren Sie den Link mit JavaScript:

anchorElement.onclick = function(){
  return false;
}

Wenn Sie nicht wissen, dass JavaScript anchorElementder Knoten oder das Element selbst ist. Der häufigste Weg, um ein Element zu erhalten, ist die Verwendung des HTML- idAttributs. Nehmen wir an, wir haben:

<a id='whatever' href='#'>Text Here</a>

Ihr Code könnte sein:

document.getElementById('whatever').onclick = function(){
  return false;
}

Es gibt eine Reihe anderer Möglichkeiten, um Knoten zu erhalten.

Mein Anwendungsfall war ein ziehbares Element, das weder ein Zeigerereignis noch ein übergeordnetes Element mit einem Zeigerereignis haben konnte.

Ich habe es gelöst, indem ich einen globalen Stil bedingt angewendet habe, der einen Greifcursor nur beim Ziehen erzwingt. (Ich verwende React und Styled-Komponenten, aber die gleiche Logik kann auf Vanilla Js angewendet werden.)

const SetDraggingCursor = createGlobalStyle`
  * {
    cursor: grabbing !important;
  }
`;

// ...

{isDragging && <SetDraggingCursor />}

Sie können ein anderes Div erstellen und es genau auf Ihrem letzten Div positionieren und ein CSS wie dieses erstellen:

.example{
    background-color: rgba(255, 255, 255, 0); //opacity:0
    z-index: 1;
    cursor: not-allowed;
}

Anstelle von Wrapper kann dies auch von innen mit reinem CSS erfolgen. (Ich verwende dies mit Material-Webkomponenten, damit der Code etwas komplexer wird.)

button:disabled {
    > * {
        cursor: not-allowed;
        pointer-events: initial;
    }

    &::before {
        background-color: #fff0;
    }

    &::after {
        background-color: #fff0;
    }
}

<button>
    <svg .../>
</button>

Ich habe auch versucht , ::beforeund ::aftermit button:disableddirekt, aber konnte einfach nicht machen es möglich ...