Comment désactiver les interactions de liens et appliquer des styles de curseur personnalisés avec « pointer-events : none » ?

Désactiver le curseur de lien et de style avec "pointer-events: none"

Lorsque vous essayez de désactiver un lien et d'appliquer un style de curseur personnalisé, la propriété CSS "cursor: text" peut ne pas prendre effet. En effet, "pointer-events: none" désactive toutes les interactions de la souris avec l'élément, empêchant ainsi les modifications du curseur.

Pour résoudre ce problème, plutôt que d'appliquer la propriété du curseur au lien désactivé, appliquez-la à l'élément parent. . En enveloppant le lien dans un élément supplémentaire, tel qu'un span, vous pouvez spécifier la propriété du curseur dans le CSS de l'élément parent.

Exemple

HTML :

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

CSS :

<code class="css">.wrapper {
    position: relative;
    cursor: text;  /* Custom cursor property */
}
.wrapper a {
    pointer-events: none;  /* Disable mouse interactions */
}</code>

Notez que certaines incohérences du navigateur peuvent exister. Pour la compatibilité avec IE11, un pseudo-élément peut être requis. De plus, le pseudo-élément permet la sélection de texte dans Firefox, tandis que Chrome permet la sélection de texte sans lui.

Exemple mis à jour (compatibilité IE11) :

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

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!