Pourquoi l'effet "cursor:pointer" en CSS ne fonctionne-t-il pas ?

Question

J'ai défini cursor: pointer pour .about > span, mais lorsque ma souris survole ces textes dans , le curseur ne se change pas en mode pointeur. J'aimerais savoir pourquoi cela ne fonctionne pas.

#firstdiv {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  margin: auto;
  background: #E6E6E6;
  text-align: center;
  font-size: 0;
  z-index: -2;
}

.about>span {
  cursor: pointer;
  font-family: Eurofurence Light;
  padding: 0 0 3px 0;
  color: #01DFA5;
}

    YOU CHIA LAI

      Je suis un Master en Architecture candidat à l'Université Rice.

      Je suis également intéressé par la photographie &
        design web.
      Je souhaite que vous puissiez en savoir plus sur moi.

Answer 1

J'ai joué avec mon css pendant des heures, en changeant la position et le z-index de pratiquement chaque élément sur la page. J'ai supprimé tous les autres éléments du DOM sauf celui avec le curseur : pointer au survol, et ça ne marchait TOUJOURS pas.

Pour moi, sur Mac OSX El Capitan V 10.11, le problème était lié à une sorte d'interférence avec Photoshop CC. Une fois que j'ai fermé Photoshop, le curseur s'est remis à fonctionner.

Solution pour moi : Fermer et rouvrir Photoshop

Apparemment, cela peut arriver à cause de nombreux autres programmes tels que Photoshop, Sketch, DataGrip, Acrobat, Sublime Text, etc.

---

Mise à jour (18/11/2023) : Si vous rencontrez un jour le problème où votre curseur ne change pas pour indiquer que vous pouvez redimensionner une fenêtre d'application sur MacOS, ceci pourrait être la cause.

Answer 2

Vous devez modifier le z-index pour que #premierediv soit considéré comme étant au-dessus des autres divs.

Answer 3

Cela vient de m'arriver et, dans mon cas, c'était dû à une règle CSS pointer-events: none; qui avait été définie sur un élément parent et que j'avais oublié.

Cela faisait en sorte que tous les événements du pointeur soient simplement ignorés, y compris le curseur.

Pour résoudre ce problème, vous pouvez simplement définir le style pour autoriser les événements du pointeur :

.about>span{
    curseur:pointer;
    pointer-events: auto;
}

Ou directement dans l'élément :

...

Answer 4

cursor:pointer ne fonctionne pas lorsque vous utilisez l'émulateur mobile de Chrome.

Answer 5

Ajoutez également cursor:hand. Certains navigateurs en ont besoin à la place.