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

position: relative;
z-index: 2;
cursor: pointer

a marché pour moi.

Answer 2

Pendant les dernières heures, je me grattais la tête en me demandant pourquoi mon CSS ne fonctionnait pas! J'essayais d'afficher row-resize comme curseur mais il affichait le curseur par défaut, alors que pour s-resize le navigateur affichait le bon curseur. J'ai essayé de changer le z-index mais cela n'a pas résolu mon problème.

Après avoir essayé quelques autres solutions trouvées sur internet, j'ai appelé l'un de mes collègues et partagé mon écran via Google Meet et il m'a dit qu'il voyait l'icône row-resize quand moi je voyais l'icône par défaut!!! Il m'a même envoyé la capture d'écran de ma vidéo diffusée en direct.

Après une enquête plus approfondie, j'ai découvert que comme j'utilisais Connections Bureau à distance pour me connecter à mon PC de bureau, pour une raison quelconque, RDC ne montrait pas certains types de curseurs.

Voici la liste des curseurs que je n'ai pas pu voir sur mon PC à distance,

none, cell, crosshair, text, vertical-text, alias, copy, col-resize, row-resize,

Answer 3

Cela fonctionne si vous supprimez position:fixed de #firstdiv - mais @Sj a probablement raison aussi - probablement un problème de superposition de calques z-index.

Answer 4

J'ai rencontré ce problème en utilisant Angular et SCSS. J'avais tout mon CSS imbriqué, donc j'ai décidé de retirer cursor: pointer; de celui-ci. Et ça a fonctionné.

Exemple :

.container{
  .Approved{
    color:green;
  }

  .ApprovedAndVerified{
    color:black;
  }

  .lock_button{
    font-size:35px;
    display:block;
    text-align:center;
  }
}

.lock_button{
  cursor:pointer;
}

Answer 5

Le problème dans mon cas était que le :after bloquait les événements de la souris, j'ai donc dû ajouter pointer-events: none; à mon bloc :after.