Comment styliser un curseur en « texte » tout en désactivant les clics de souris sur un élément ?

Style du curseur avec interactions de souris désactivées

Lors de la tentative d'utilisation des propriétés CSS "pointer-events: none" et "cursor: text" , les utilisateurs peuvent rencontrer le problème du curseur qui ne change pas d'apparence malgré sa désactivation. Cela se produit car "pointer-events: none" désactive toutes les interactions de la souris avec l'élément.

Pour résoudre ce problème, plutôt que d'appliquer la propriété du curseur directement au lien concerné, elle doit être appliquée à l'élément parent. Cela peut être fait en enveloppant le lien avec un élément conteneur et en appliquant le style de curseur au conteneur.

Exemple de code :

HTML :

<code class="html"><span class="wrapper">
    <a href="#">Some Link</a>
</span></code>

CSS :

<code class="css">.wrapper {
    position: relative;
    cursor: text;  /* This is used */
}
.wrapper a {
    pointer-events: none;
}</code>

Considérations supplémentaires :

• Dans IE11, un pseudo-élément peut être requis :

<code class="css">.wrapper:after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
}</code>

• Dans Firefox, le curseur ne peut pas être appliqué directement sur le texte à l'intérieur du lien. Au lieu de cela, l'approche pseudo-élément doit être utilisée pour rendre le texte sélectionnable tout en appliquant le style du curseur au conteneur.

En implémentant cette approche, la propriété du curseur peut être modifiée avec succès tout en empêchant les interactions de la souris. avec l'élément spécifié.

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!