Pregunta ¿Cómo deshabilitar un enlace usando solo CSS?


¿Hay alguna forma de desactivar un enlace usando CSS?

Tengo una clase llamada current-page y quiere que los enlaces con esta clase se deshabiliten para que no ocurra ninguna acción cuando se hace clic en ellos.


749
2018-01-19 04:55


origen


Respuestas:


La respuesta ya está en los comentarios de la pregunta. Para más visibilidad, estoy copiando esta solución aquí:

.not-active {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}
<a href="link.html" class="not-active">Link</a>

Para soporte de navegador, ver https://caniuse.com/#feat=pointer-events. Si necesita admitir IE, hay una solución alternativa; ver esta respuesta.

Advertencia: el uso de pointer-events en CSS para elementos no SVG es experimental. La característica solía ser parte de la especificación del borrador de UI de CSS3 pero, debido a muchos problemas abiertos, se ha pospuesto a CSS4.


1211
2017-10-04 06:05



.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}
<a href="#" class="disabled">link</a>


119
2018-01-19 05:01



CSS solo se puede usar para cambiar el estilo de algo. Lo mejor que puedes hacer con CSS puro es ocultar el enlace por completo.

Lo que realmente necesitas es un javascript. A continuación, le indicamos cómo haría lo que desea con la biblioteca de jQuery.

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

118
2018-01-19 05:00



CSS no puede hacer eso. CSS es solo para presentación Tus opciones son:

  • No incluya el href atributo en su <a> etiquetas.
  • Use JavaScript para encontrar los elementos de anclaje con ese classy eliminar sus href o onclick atributos en consecuencia. jQuery te ayudaría con eso (NickF mostró cómo hacer algo similar, pero mejor).

32
2018-04-10 05:53



Bootstrap Disabled Link

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Bootstrap Disabled Button pero parece un enlace

<button type="button" class="btn btn-link">Link</button>

28
2018-01-19 05:01



Puedes establecer href atribuir a javascript:void(0)

.disabled {
  /* Disabled link style */
  color: black;
}
<a class="disabled" href="javascript:void(0)">LINK</a>


18
2017-12-27 18:00



Si desea atenerse solo a HTML / CSS en un formulario, otra opción es usar un botón. Ajústelo y configure el disabled atributo.

P.ej. http://jsfiddle.net/cFTxH/1/


10
2018-01-19 05:18



La única forma en que podría hacer esto sin CSS sería establecer un CSS en un div envolvente que hiciera desaparecer su a y que algo más tome su lugar.

P.EJ:

<div class="disabled">
    <a class="toggleLink" href="wherever">blah</a>
    <span class="toggleLink">blah</span
</div>

Con un CSS como

.disabled a.toggleLink { display: none; }
span.toggleLink { display: none; }
.disabled span.toggleLink { display: inline; }

Para apagar la A, tendrás que reemplazar su evento click o href, como lo describieron otros.

PD: Solo para aclarar, consideraría que esta es una solución bastante desordenada, y para SEO tampoco es la mejor, pero creo que es lo mejor con CSS puro.


10
2017-09-26 05:05



Prueba esto:

<style>
.btn-disable {
    display:inline-block;
    pointer-events: none;       
}
</style>

9
2017-10-06 10:50