Dodaj właściwość kursora CSS podczas używania „pointer-events: none”

Próbuję wyłączyć określony link i zastosować styl kursora, ale to polecenie CSS cursor: text;nie ma wpływu. Kursor jest zawsze domyślny. Używam najnowszej wersji przeglądarki Firefox.

CSS:

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

Użycie pointer-events: nonespowoduje wyłączenie wszystkich interakcji myszy z tym elementem. Jeśli chciałbyś zmienić cursorwłaściwość, musiałbyś zastosować zmiany do elementu nadrzędnego. Możesz owinąć łącze elementem i dodać cursordo niego właściwość.

Przykład tutaj

HTML

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

CSS

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

Istnieje jednak kilka niespójności przeglądarek. Wygląda na to, że aby to zadziałało w IE11, potrzebujesz pseudoelementu. Pseudoelement umożliwia również zaznaczanie tekstu w FF. Co dziwne, możesz bez niego zaznaczyć tekst w Chrome.

Zaktualizowany przykład

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

To już dość dawno od oryginalnego pytania, ale to jest moje rozwiązanie bez żadnego elementu opakowującego i kursora bez zdarzeń po wskaźnikach:

<!-- 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;
}

Przykład CodePen

EDYTOWAĆ:

• Chrome zaczął zwiększać nacisk na klikanie elementów z atrybutem tabindex (nawet z tabindex = "- 1"). Najszybszym rozwiązaniem jest onfocus="this.blur()"wyłączenie elementu.
• Musisz zapobiec zogniskowaniu elementu, w przeciwnym razie można go aktywować klawiszem Enter

Określając pointer-events:none, aktywnie deklarujesz, że nie ma interakcji myszy między elementem a kursorem. Dlatego też nie może mieć kursora - jest niewidoczny dla wszystkich zachowań myszy.

Dowód można znaleźć tutaj .

Usuń pointer-events: none !important;. Wyłącz link za pomocą JavaScript:

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

Jeśli nie wiesz, JavaScript anchorElementto sam węzeł lub element. Najczęstszym sposobem uzyskania elementu jest użycie idatrybutu HTML . Powiedzmy, że mamy:

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

Twój kod może być:

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

Istnieje wiele innych sposobów na zdobycie węzłów.

Moim przypadkiem użycia był element do przeciągania, który nie mógł mieć żadnego zdarzenia wskaźnika ani żadnego elementu nadrzędnego ze zdarzeniem wskaźnika.

Rozwiązałem to, stosując warunkowo styl globalny, który wymuszał chwytanie kursora tylko podczas przeciągania. (Używam React i styled-components, ale ta sama logika może być zastosowana na vanilla js).

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

// ...

{isDragging && <SetDraggingCursor />}

możesz utworzyć kolejny element div i ustawić go dokładnie na ostatnim div i utworzyć taki plik css:

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

Zamiast wrappera, można to zrobić za pomocą czystego CSS również od wewnątrz. (Używam tego z materialnym komponentem sieciowym, więc kod staje się nieco bardziej złożony).

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

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

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

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

Próbowałem również ::beforei ::afterz button:disabledbezpośrednio, ale po prostu nie mógł się zdarzyć ...