Astuce CSS pour désactiver les liens

Problème :

Est-il possible de désactiver les liens à l'aide de CSS ? Par exemple, si vous avez une classe appelée « page actuelle », vous souhaiterez peut-être empêcher les liens avec cette classe d'être actifs lorsque vous cliquez dessus.

Solution :

L'extrait de code CSS suivant offre une solution simple :

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

Ce code cible les éléments avec l'attribut "aria-current='page'" et désactive leur interactivité en définissant "pointer-events" sur "aucun". Il supprime également le style typique des liens en définissant "curseur" sur "par défaut", en supprimant la décoration du texte et en réinitialisant la couleur du texte en noir.

Pour appliquer cette solution en HTML, vous pouvez modifier votre lien comme suit :

Link

Cela désactivera le lien et l'empêchera d'être cliquable lorsque le La classe "page actuelle" est appliquée.