web-dev-qa-db-fra.com

Comment pouvez-vous implémenter une icône de curseur de capture dans Chrome?

Je sais qu'il est possible d'utiliser une icône de curseur de saisie dans Chrome (dans Gmail, bien sûr), mais je ne sais pas comment l'implémenter dans mon code. J'ai essayé (en CSS ):

body {
  cursor: grab;
}

body {
  cursor: -webkit-grab;
}


body {
  cursor: url(http://www.worldtimzone.com/mozilla/testcase/css3cursors_files/grab.gif);
}
javascripthtmlcssgoogle-chrome
47
Alex

Voici le style que gmail utilise si c'est le style de curseur exact que vous recherchez:

body {
  cursor: url(https://ssl.gstatic.com/ui/v1/icons/mail/images/2/openhand.cur), default !important;
}

Vous pouvez le tester ici .

14
Nick Craver

Chrome nécessite -webkit- avant le nom "grab";

Voici un exemple de style qui fonctionne avec les deux Chrome et Mozilla, et inclut le changement de curseur lorsque vous "tenez" quelque chose.

#eA { cursor: -webkit-grab; cursor:-moz-grab; }
#eA:active { cursor: -webkit-grabbing; cursor:-moz-grabbing;}

Référence: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

77
Ulad Kasach

Donc, en CSS, vous commencez par les bases et passez au plus obscur. Le navigateur choisira le dernier qui fonctionne pour ce navigateur spécifique. Chrome, pour une raison quelconque, prend en charge la capture de webkit mais pas la capture.

body {
  cursor: pointer;
  cursor: hand;
  cursor: -webkit-grab;
  cursor: grab;
}

En ce qui concerne votre question de suivi sur la capacité de manipuler cela, veuillez essayer d'utiliser quelque chose comme ceci:

document.body.style.cursor = 'move';
14
Nicholas Blasgen