Agregue la propiedad de cursor CSS cuando use "pointer-events: none"

Estoy tratando de deshabilitar un enlace específico y aplicar el estilo del cursor, pero este comando CSS cursor: text;no tendrá efecto. El cursor siempre está predeterminado. Estoy usando la última versión de Firefox.

CSS:

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

El uso pointer-events: noneserá desactivar todas las interacciones del ratón con ese elemento. Si quisiera cambiar la cursorpropiedad, tendría que aplicar los cambios al elemento principal. Puede envolver el enlace con un elemento y agregarle la cursorpropiedad.

Ejemplo aquí

HTML

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

CSS

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

Sin embargo, hay algunas inconsistencias en el navegador. Para que esto funcione en IE11, parece que necesita un pseudo elemento. El pseudo elemento también le permite seleccionar el texto en FF. Por extraño que parezca, puede seleccionar el texto en Chrome sin él.

Ejemplo actualizado

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

Ha pasado bastante tiempo desde la pregunta original, pero esta es mi solución sin ningún elemento envolvente y cursor sin eventos de puntero:

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

Ejemplo de CodePen

EDITAR:

• Chrome ha comenzado a enfocarse en hacer clic en elementos con el atributo tabindex (incluso con tabindex = "- 1"). La solución más rápida es configurar el onfocus="this.blur()"elemento desenfocado.
• Debe evitar enfocar el elemento, de lo contrario, podría activarse con la tecla enter

Al especificar pointer-events:none, declara activamente que no hay interacción del mouse entre el elemento y el cursor. Por lo tanto, tampoco puede tener un cursor, es invisible para todos los comportamientos del mouse.

Prueba que se puede encontrar aquí .

Quitar pointer-events: none !important;. Deshabilite el enlace usando JavaScript:

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

Si no sabe que JavaScript anchorElementes el nodo o elemento en sí. La forma más común de obtener un elemento es mediante el idatributo HTML . Digamos que tenemos:

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

Tu código podría ser:

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

Hay otras formas de obtener Nodos.

Mi caso de uso era un elemento arrastrable que no podía tener ningún evento de puntero ni elemento padre con un evento de puntero.

Lo resolví aplicando condicionalmente un estilo global forzando un cursor de agarre solo mientras lo arrastraba. (Estoy usando React y styled-components, pero se puede aplicar la misma lógica en vanilla js).

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

// ...

{isDragging && <SetDraggingCursor />}

puede crear otro div y colocarlo exactamente en su último div y hacer un CSS como este:

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

En lugar de envoltorio, esto también se puede hacer con CSS puro desde adentro. (Utilizo esto con el componente web material, por lo que el código se vuelve un poco más complejo).

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

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

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

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

También probé ::beforey ::aftercon button:disableddirectamente, sino que simplemente no podía hacer que suceda ...