Cómo deshabilitar un enlace usando solo CSS

¿Hay alguna manera de desactivar un enlace usando CSS?

Tengo una clase llamada current-pagey quiero que los enlaces con esta clase estén deshabilitados para que no se produzca ninguna acción cuando se haga clic en ellos.

Jan 19 '10 11:01 RSK

De esta solución :

[aria-current="page"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}

<a href="link.html" aria-current="page">Link</a>

Expandir fragmento

Para obtener compatibilidad con el navegador, consulte https://caniuse.com/#feat=pointer-events . Si necesita compatibilidad con Internet Explorer, existe una solución alternativa; ver esta respuesta .

Advertencia: el uso de pointer-eventsen CSS para elementos que no son SVG es experimental. La característica solía ser parte del borrador de la especificación de la interfaz de usuario de CSS 3 pero, debido a muchos problemas abiertos, se pospuso a CSS 4.

Dec 11 '2010 10:12 RSK

.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}

<a href="#" class="disabled">link</a>

Expandir fragmento

Oct 04 '2015 06:10 Amir Keshavarz

CSS sólo se puede utilizar para cambiar el estilo de algo. Probablemente lo mejor que podría hacer con CSS puro es ocultar el enlace por completo.

Lo que realmente necesitas es algo de código JavaScript. Así es como harías lo que quisieras usando la biblioteca jQuery.

$('a.current-page').click(function() { return false; });

Jan 19 '2010 05:01 nickf

CSS no puede deshabilitar un enlace. Puede inhibir eventos de puntero como clics, pero los clics no son la única forma de activar un enlace. Tus opciones son:

No incluya los atributos hrefo onclicken su <a>etiqueta.
Utilice document.querySelectoret al para encontrar los elementos de anclaje que desea desactivar. Elimine sus atributos hrefo onclickpara que ya no tengan un comportamiento de enlace que pueda activarse mediante cualquier método.

Jan 19 '2010 05:01 easeout