Adicione propriedade de cursor CSS ao usar “eventos de ponteiro: nenhum”

Estou tentando desativar um link específico e aplicar o estilo do cursor, mas este comando CSS cursor: text;não tem efeito. O cursor é sempre padrão. Estou usando a versão mais recente do Firefox.

CSS:

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

Usando pointer-events: noneirá desativar todas as interações de mouse com esse elemento. Se você quiser alterar a cursorpropriedade, deverá aplicar as alterações ao elemento pai. Você pode envolver o link com um elemento e adicionar a cursorpropriedade a ele.

Exemplo aqui

HTML

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

CSS

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

No entanto, existem algumas inconsistências do navegador. Para fazer isso funcionar no IE11, parece que você precisa de um pseudoelemento. O pseudo elemento também permite que você selecione o texto em FF. Curiosamente, você pode selecionar o texto no Chrome sem ele.

Exemplo Atualizado

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

Já faz muito tempo desde a pergunta original, mas esta é a minha solução sem qualquer elemento envolvente e cursor sem eventos de ponteiro:

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

Exemplo de CodePen

EDITAR:

• O Chrome começou a adicionar foco no clique em elementos com o atributo tabindex (mesmo com tabindex = "- 1"). A solução mais rápida é definir onfocus="this.blur()"para desfocar o elemento.
• Você precisa evitar focar o elemento, caso contrário, ele poderia ser ativado pela tecla Enter

Ao especificar, pointer-events:nonevocê está declarando ativamente que não há interação do mouse entre o elemento e o cursor. Portanto, ele também não pode ter um cursor - é invisível para todos os comportamentos do mouse.

A prova pode ser encontrada aqui .

Remova pointer-events: none !important;. Desative o link usando JavaScript:

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

Se você não sabe, JavaScript anchorElementé o próprio nó ou elemento. A maneira mais comum de obter um Elemento é usando o idatributo HTML . Digamos que temos:

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

Seu código poderia ser:

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

Existem várias outras maneiras de obter nós.

Meu caso de uso foi um elemento arrastável que não poderia ter nenhum evento de ponteiro nem nenhum elemento pai com um evento de ponteiro.

Resolvi isso aplicando condicionalmente um estilo global, forçando um cursor de agarramento apenas ao arrastar. (Estou usando React e componentes estilizados, mas a mesma lógica pode ser aplicada no vanilla js).

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

// ...

{isDragging && <SetDraggingCursor />}

você pode criar outro div e posicioná-lo exatamente em seu último div e fazer um css como este:

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

Em vez de empacotar, isso pode ser feito com CSS puro de dentro também. (Eu uso isso com o componente material da web, então o código fica um pouco mais complexo.)

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

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

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

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

Eu também tentei ::beforee ::aftercom button:disableddiretamente, mas simplesmente não podia fazer isso acontecer ...