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

Notez qu'il peut y avoir des incohérences dans le navigateur lors de l'utilisation de cette approche. Dans IE11, par exemple, un pseudo-élément peut être requis pour garantir la compatibilité. Ce pseudo-élément doit avoir sa largeur et sa hauteur définies à 100 % et sa position définie sur absolue, couvrant toute la zone de l'élément parent.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!