Comment appliquer des styles de curseur lors de la désactivation des événements de survol avec « pointer-events : none » ?

Ajouter une propriété de curseur lors de la désactivation des événements de survol avec des événements de pointeur : aucun

Désactiver les événements de survol à l'aide d'événements de pointeur : aucun ne peut parfois empêcher le application des styles de curseur. En effet, pointer-events: none rend effectivement l'élément invisible aux interactions de la souris, y compris la modification du style du curseur.

Pour résoudre ce problème, la propriété curseur doit être appliquée à un élément parent qui contient l'élément avec le pointeur. -événements : aucun. Cela permet d'appliquer le style du curseur à l'élément parent tout en désactivant les événements de survol pour l'élément enfant.

Exemple :

HTML :

<div class="container">
  <a href="#">Link</a>
</div>

CSS :

.container {
  cursor: pointer;
}
.container a {
  pointer-events: none;
  color: blue;
}

Dans cet exemple, la propriété curseur est appliquée à la classe .container, qui contient le lien. Cela permet au curseur de se transformer en pointeur lors du survol du conteneur, même si le lien lui-même comporte des événements de pointeur : aucun appliqué.