Existe-t-il un moyen de désactiver un lien en utilisant CSS?

J'ai une classe appelée current-pageet je souhaite que les liens avec cette classe soient désactivés afin qu'aucune action ne se produise lorsqu'ils sont cliqués.

La réponse est déjà dans les commentaires de la question. Pour plus de visibilité, je copie cette solution ici:

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

<a href="link.html" class="not-active">Link</a>

Pour la prise en charge du navigateur, veuillez consulter https://caniuse.com/#feat=pointer-events . Si vous devez prendre en charge IE, il existe une solution de contournement; voir cette réponse .

Avertissement: L'utilisation de pointer-eventsen CSS pour les éléments non-SVG est expérimentale. La fonctionnalité faisait auparavant partie du projet de spécification de l'interface utilisateur CSS3 mais, en raison de nombreux problèmes ouverts, a été reportée à CSS4.

CSS ne peut être utilisé que pour changer le style de quelque chose. Le mieux que vous puissiez probablement faire avec du CSS pur est de masquer complètement le lien.

Ce dont vous avez vraiment besoin, c'est de javascript. Voici comment vous feriez ce que vous voulez en utilisant la bibliothèque jQuery.

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

CSS ne peut pas faire ça. CSS est pour la présentation seulement. Vos options sont:

• N'incluez pas l' hrefattribut dans vos <a>balises.
• Utilisez JavaScript pour trouver les éléments d'ancrage avec cela classet supprimez leur hrefou leurs onclickattributs en conséquence. jQuery vous aiderait avec cela (NickF a montré comment faire quelque chose de similaire mais mieux).

Lien Bootstrap désactivé

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

Bouton Bootstrap désactivé mais il ressemble à un lien

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

Vous pouvez définir l' hrefattribut surjavascript:void(0)

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

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

J'ai utilisé:

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

Et ce n'était pas suffisant; dans certains navigateurs, le lien était toujours affiché, clignotant.

J'ai dû ajouter:

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

Si vous souhaitez vous limiter à HTML / CSS sur un formulaire, une autre option consiste à utiliser un bouton. Stylisez-le et définissez l' disabledattribut.

Par exemple http://jsfiddle.net/cFTxH/1/

Si vous souhaitez que ce soit uniquement CSS, la logique de désactivation doit être définie par CSS.

Pour déplacer la logique dans les définitions CSS, vous devrez utiliser des sélecteurs d'attributs. Voici quelques exemples :

Désactivez le lien qui a une href exacte: =

Vous pouvez choisir de désactiver les liens qui contiennent une valeur href spécifique comme ceci:

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

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

Désactivez un lien contenant un morceau de chemin: *=

Ici, tout lien contenant /keyword/dans path sera désactivé

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

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

Désactivez un lien qui commence par: ^=

l' [attribute^=value]opérateur cible un attribut qui commence par une valeur spécifique. Vous permet de supprimer les sites Web et les chemins d'accès racine.

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

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

Vous pouvez même l'utiliser pour désactiver les liens non https. Par exemple :

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

Désactivez un lien qui se termine par: $=

L' [attribute$=value]opérateur cible un attribut qui se termine par une valeur spécifique. Il peut être utile de supprimer les extensions de fichier.

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

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

Ou tout autre attribut

Css peut cibler n'importe quel attribut HTML. Peut - être rel, target, data-customet ainsi de suite ...

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

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

Combinaison de sélecteurs d'attributs

Vous pouvez enchaîner plusieurs règles. Disons que vous souhaitez désactiver tous les liens externes, mais pas ceux qui pointent vers votre site Web:

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

Ou désactivez les liens vers les fichiers pdf d'un site Web spécifique:

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

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

Prise en charge du navigateur

Les sélecteurs d'attributs sont pris en charge depuis IE7. :not()sélecteur depuis IE9.

Une façon de le faire avec CSS, serait de définir un CSS sur un habillage divque vous définissez pour disparaître et quelque chose d'autre prend sa place.

Par exemple:

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

Avec un CSS comme

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

Pour désactiver réellement le, avous devrez remplacer son événement de clic ou href, comme décrit par d'autres.

PS: Juste pour clarifier, je considérerais cela comme une solution assez désordonnée, et pour le référencement ce n'est pas le meilleur non plus, mais je pense que c'est le meilleur avec purement CSS.

Essaye ça:

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

La propriété pointer-events permet de contrôler la façon dont les éléments HTML réagissent aux événements souris / tactiles - y compris les états CSS de vol stationnaire / actif, les événements clic / tapotement en Javascript, et si le curseur est visible ou non.

Ce n'est pas la seule façon de désactiver un lien , mais une bonne façon CSS qui fonctionne dans IE10 + et tous les nouveaux navigateurs:

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

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

J'ai cherché sur Internet et a trouvé pas mieux que cela . Fondamentalement, pour désactiver la fonctionnalité de clic de bouton, ajoutez simplement un style CSS à l'aide de jQuery comme ceci:

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

Ensuite, pour le réactiver, procédez comme suit

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

Vérifié sur Firefox et IE 11, cela a fonctionné.

vous pouvez utiliser ce 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>

Merci à tous ceux qui ont publié des solutions, j'ai combiné plusieurs approches pour fournir des disabledfonctionnalités plus avancées . Voici un résumé , et le code est ci-dessous.

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

Voici la classe 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

Vous pouvez également dimensionner un autre élément pour qu'il couvre les liens (en utilisant le bon z-index): cela "mangera" les clics.

(Nous avons découvert cela par accident parce que nous avions un problème avec des liens soudainement inactifs en raison d'une conception "réactive" qui faisait que H2 les couvrait lorsque la fenêtre du navigateur était de taille mobile.)

Démo ici
Essayez celui-ci

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

Une autre astuce consiste à placer un élément invisible au-dessus. Cela désactivera également les effets de survol

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

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

Il est possible de le faire 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>

Voir sur:

Veuillez noter que le text-decoration: none;et color: black;n'est pas nécessaire, mais il fait ressembler davantage le lien au texte brut.

pointer-events:none désactivera le lien:

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