¿Hay alguna forma de deshabilitar un enlace usando CSS?

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

La respuesta ya está en los comentarios de la pregunta. Para mayor 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 del navegador, consulte https://caniuse.com/#feat=pointer-events . Si necesita admitir IE, hay una solución alternativa; ver esta respuesta .

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

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

Lo que realmente necesitas es un poco de JavaScript. Así es como haría lo que quisiera usando la biblioteca jQuery.

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

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

• No incluya el hrefatributo en sus <a>etiquetas.
• Use JavaScript para encontrar los elementos de anclaje con eso classy elimine sus atributos hrefo sus onclickatributos en consecuencia. jQuery te ayudaría con eso (NickF mostró cómo hacer algo similar pero mejor).

Enlace deshabilitado Bootstrap

<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>

Botón de Bootstrap deshabilitado pero parece un enlace

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

Puede establecer el hrefatributo enjavascript:void(0)

.disabled {
  /* Disabled link style */
  color: black;
}

<a class="disabled" href="javascript:void(0)">LINK</a>

Solía:

.current-page a:hover {
pointer-events: none !important;
}

Y no fue suficiente; en algunos navegadores todavía mostraba el enlace, parpadeando.

Tuve que agregar:

.current-page a {
cursor: text !important;
}

Si desea apegarse solo a HTML / CSS en un formulario, otra opción es usar un botón. Dale estilo y establece el disabledatributo.

Por ejemplo, http://jsfiddle.net/cFTxH/1/

Si desea que sea solo CSS, la lógica de desactivación debe definirse mediante CSS.

Para mover la lógica en las definiciones CSS, deberá usar selectores de atributos. Aquí hay unos ejemplos :

Deshabilite el enlace que tiene un href exacto: =

Puede optar por desactivar los enlaces que contienen un valor href específico de esta manera:

<a href="//website.com/exact/path">Exact path</a>

[href="https://stackoverflow.com//website.com/exact/path"]{
  pointer-events: none;
}

Deshabilite un enlace que contiene un fragmento de ruta: *=

Aquí, cualquier enlace que contenga /keyword/en la ruta será deshabilitado

<a href="//website.com/keyword/in/path">Contains in path</a>

[href*="/keyword/"]{
  pointer-events: none;
}

Deshabilite un enlace que comienza con: ^=

el [attribute^=value]operador apunta a un atributo que comienza con un valor específico. Le permite descartar sitios web y rutas raíz.

<a href="//website.com/begins/with/path">Begins with path</a>

[href^="//website.com/begins/with"]{
  pointer-events: none;
}

Incluso puede usarlo para deshabilitar enlaces que no sean https. Por ejemplo :

a:not([href^="https://"]){
  pointer-events: none;
}

Deshabilite un enlace que termina con: $=

El [attribute$=value]operador apunta a un atributo que termina con un valor específico. Puede ser útil para descartar extensiones de archivo.

<a href="/path/to/file.pdf">Link to pdf</a>

[href$=".pdf"]{
  pointer-events: none;
}

O cualquier otro atributo

Css puede apuntar a cualquier atributo HTML. Podría ser rel, target, data-customy así sucesivamente ...

<a href="#" target="_blank">Blank link</a>

[target=_blank]{
  pointer-events: none;
}

Combinación de selectores de atributos

Puedes encadenar múltiples reglas. Supongamos que desea deshabilitar todos los enlaces externos, pero no aquellos que apuntan a su sitio web:

a[href*="//"]:not([href*="my-website.com"]) {
    pointer-events: none;
}

O deshabilite los enlaces a archivos pdf de un sitio web específico:

<a href="//website.com/path/to/file.jpg">Link to image</a>

[href^="//website.com"][href$=".jpg"] {
  color: red;
}

Soporte del navegador

Los selectores de atributos son compatibles desde IE7. :not()selector desde IE9.

Una forma de hacer esto con CSS sería establecer un CSS en una envoltura divque configuras para desaparecer y algo más toma 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 desactivarlo a, tendrá que reemplazar su evento de clic o href, según lo descrito por 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 la mejor con CSS puro.

Prueba esto:

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

La propiedad de eventos de puntero permite controlar cómo los elementos HTML responden a los eventos de mouse / touch, incluidos los elementos activos / activadores de CSS, los eventos de clic / toque en Javascript y si el cursor está visible o no.

Esa no es la única forma de deshabilitar un enlace , sino una buena forma de CSS que funciona en IE10 + y todos los navegadores nuevos:

.current-page {
  pointer-events: none;
  color: grey;
}

<a href="#" class="current-page">This link is disabled</a>

Busqué en internet y no encontré nada mejor que esto . Básicamente para deshabilitar la funcionalidad de hacer clic en el botón, simplemente agregue estilo CSS usando jQuery de esta manera:

$("#myLink").css({ 'pointer-events': 'none' });

Luego, para habilitarlo nuevamente, haga esto

$("#myLink").css({ 'pointer-events': '' });

Comprobado en Firefox e IE 11, funcionó.

puedes usar este css:

a.button,button {
    display: inline-block;
    padding: 6px 15px;
    margin: 5px;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
    -moz-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    -webkit-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    box-shadow: inset 0 3px 20px 0 #cdcdcd;
}

a[disabled].button,button[disabled] {
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
    -webkit-touch-callout: none;
}

a.button:active:not([disabled]),button:active:not([disabled]) {
    background-color: transparent !important;
    color: #2a2a2a !important;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
}

<button disabled="disabled">disabled!</button>
<button>click me!</button>
<a href="http://royansoft.com" disabled="disabled" class="button">test</a>
<a href="http://royansoft.com" class="button">test2</a>

Gracias a todos los que publicaron soluciones, combiné varios enfoques para proporcionar una disabledfuncionalidad más avanzada . Aquí hay una esencia , y el código está debajo.

This provides for multiple levels of defense so that Anchors marked as disable actually behave as such.
Using this approach, you get an anchor that you cannot:
  - click
  - tab to and hit return
  - tabbing to it will move focus to the next focusable element
  - it is aware if the anchor is subsequently enabled


1.  Include this css, as it is the first line of defense.  This assumes the selector you use is 'a.disabled'
    a.disabled {
      pointer-events: none;
      cursor: default;
    }

 2. Next, instantiate this class such as (with optional selector):
    $ ->
      new AnchorDisabler()

Aquí está la clase coffescript:

class AnchorDisabler
  constructor: (selector = 'a.disabled') ->
    $(selector).click(@onClick).keyup(@onKeyup).focus(@onFocus)

  isStillDisabled: (ev) =>
    ### since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event ###
    target = $(ev.target)
    return true if target.hasClass('disabled')
    return true if target.attr('disabled') is 'disabled'
    return false

  onFocus: (ev) =>
    ### if an attempt is made to focus on a disabled element, just move it along to the next focusable one. ###
    return unless @isStillDisabled(ev)

    focusables = $(':focusable')
    return unless focusables

    current = focusables.index(ev.target)
    next = (if focusables.eq(current + 1).length then focusables.eq(current + 1) else focusables.eq(0))

    next.focus() if next


  onClick: (ev) =>
    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

  onKeyup: (ev) =>

    # 13 is the js key code for Enter, we are only interested in disabling that so get out fast
    code = ev.keyCode or ev.which
    return unless code is 13

    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

También puede cambiar el tamaño de otro elemento para que cubra los enlaces (usando el índice z correcto): Eso "comerá" los clics.

(Descubrimos esto por accidente porque tuvimos un problema con los enlaces repentinamente inactivos debido a un diseño "sensible" que causó que un H2 los cubriera cuando la ventana del navegador era de tamaño móvil).

Demo aquí
Prueba este

$('html').on('click', 'a.Link', function(event){
    event.preventDefault();
});

Otro truco es colocar un elemento invisible encima de él. Esto deshabilitará cualquier efecto de desplazamiento también

.myButton{
    position: absolute;
    display: none;
}

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

Es posible hacerlo en CSS

.disabled{
  cursor:default;
  pointer-events:none;
  text-decoration:none;
  color:black;
}

<a href="https://www.google.com" target="_blank" class="disabled">Google</a>

Ver en:

Tenga en cuenta que text-decoration: none;y color: black;no es necesario, pero hace que el enlace se parezca más a texto sin formato.

pointer-events:none deshabilitará el enlace:

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