Ajouter une propriété de curseur CSS lors de l'utilisation de "pointer-events: none"

J'essaie de désactiver un lien spécifique et d'appliquer le style de curseur, mais cette commande CSS cursor: text;n'aura aucun effet. Le curseur est toujours par défaut. J'utilise la dernière version de Firefox.

CSS:

pointer-events: none !important;
cursor: text;
color: Blue;

L' utilisation pointer-events: noneva désactiver toutes les interactions de la souris avec cet élément. Si vous souhaitez modifier la cursorpropriété, vous devez appliquer les modifications à l'élément parent. Vous pouvez envelopper le lien avec un élément et y ajouter la cursorpropriété.

Exemple ici

HTML

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

CSS

.wrapper {
    position: relative;
    cursor: text;  /* This is used */
}
.wrapper a {
    pointer-events: none;
}

Il y a cependant quelques incohérences dans le navigateur. Pour que cela fonctionne dans IE11, il semble que vous ayez besoin d'un pseudo élément. Le pseudo élément permet également de sélectionner le texte dans FF. Curieusement, vous pouvez sélectionner le texte dans Chrome sans lui.

Exemple mis à jour

.wrapper:after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
}

C'est assez long depuis la question originale, mais c'est ma solution sans élément d'encapsulation et curseur sans événement de pointeur:

<!-- Add tabindex="-1" so that element cannot be reached by keyboard -->
<a href="url" class="disabled" tabindex="-1" onfocus="this.blur()">Disabled link</a>

CSS:

/* Adding cursor just works: */
.disabled {
    cursor: not-allowed;
}

/* Makes link non-clickable: */
.disabled:active {
    pointer-events: none;
}

Exemple de CodePen

ÉDITER:

• Chrome a commencé à mettre l'accent sur le clic sur les éléments avec l'attribut tabindex (même avec tabindex = "- 1"). La solution la plus rapide consiste à définir l' onfocus="this.blur()"élément flou.
• Vous devez empêcher la mise au point de l'élément, sinon il pourrait être activé par la touche Entrée

En spécifiant, pointer-events:nonevous déclarez activement qu'il n'y a pas d'interaction avec la souris entre l'élément et le curseur. Par conséquent, il ne peut pas non plus avoir de curseur - il est invisible pour tous les comportements de la souris.

Preuve à trouver ici .

Supprimer pointer-events: none !important;. Désactivez le lien en utilisant JavaScript:

anchorElement.onclick = function(){
  return false;
}

Si vous ne savez pas que JavaScript anchorElementest le nœud ou l'élément lui-même. Le moyen le plus courant d'obtenir un élément consiste à utiliser l' idattribut HTML . Disons que nous avons:

<a id='whatever' href='#'>Text Here</a>

Votre code pourrait être:

document.getElementById('whatever').onclick = function(){
  return false;
}

Il existe plusieurs autres façons d'obtenir des nœuds.

Mon cas d'utilisation était un élément déplaçable qui ne pouvait avoir aucun événement de pointeur ni aucun élément parent avec un événement de pointeur.

Je l'ai résolu en appliquant conditionnellement un style global forçant un curseur de saisie uniquement lors du glissement. (J'utilise React et styled-components, mais la même logique peut être appliquée sur vanilla js).

const SetDraggingCursor = createGlobalStyle`
  * {
    cursor: grabbing !important;
  }
`;

// ...

{isDragging && <SetDraggingCursor />}

vous pouvez créer un autre div et le positionner exactement sur votre dernier div et créer un css comme celui-ci:

.example{
    background-color: rgba(255, 255, 255, 0); //opacity:0
    z-index: 1;
    cursor: not-allowed;
}

Plutôt que de wrapper, cela peut également être fait avec du CSS pur de l'intérieur. (J'utilise cela avec un composant Web matériel, donc le code devient un peu plus complexe.)

button:disabled {
    > * {
        cursor: not-allowed;
        pointer-events: initial;
    }

    &::before {
        background-color: #fff0;
    }

    &::after {
        background-color: #fff0;
    }
}

<button>
    <svg .../>
</button>

J'ai aussi essayé ::beforeet ::afteravec button:disableddirectement, mais je ne pouvais tout simplement pas y arriver ...