Comment remplacer "pointer-events: none" par la propriété CSS "cursor" ?

Remplacement de "pointer-events: none" par la propriété CSS "cursor"

Lorsque vous essayez de désactiver un lien et d'appliquer un style de curseur personnalisé, vous pouvez rencontrer un problème où la propriété du curseur reste inchangée. Cela se produit en raison de l'utilisation de "pointer-events: none", qui désactive toutes les interactions de la souris avec l'élément.

Pour remplacer ce comportement et modifier la propriété du curseur, vous pouvez appliquer les modifications à l'élément parent de le lien. Voici un exemple :

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>

Cette technique est efficace dans la plupart des navigateurs. Cependant, il peut y avoir des incohérences dans les anciennes versions d'Internet Explorer (IE11). Pour garantir la compatibilité entre navigateurs, vous pouvez ajouter un pseudo-élément à l'élément parent :

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

Avec ces modifications, vous pouvez désactiver avec succès le lien tout en conservant le style de curseur souhaité.

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!