Image de curseur personnalisée CSS

Question

J'ai un certain nombre d'images Heroshot, qui ont une fenêtre contextuelle modale lorsque vous cliquez dessus. J'essaie de faire en sorte que mon curseur se transforme en loupe chaque fois qu'il est déplacé sur l'image. Le CSS suivant ne semble pas fonctionner même si mon magnify.cur est présent au bon endroit.

 a.heroshot img {
  cursor:url(/img/magnify.cur), pointer;
}
 

Quelqu'un a-t-il déjà fait quelque chose de similaire? Cela ne me dérange pas une solution JavaScript si elle existe.

EDIT : Cela fonctionne dans Safari, mais pas dans Firefox.

Answer 1

Votre problème peut être que le curseur Url ne fonctionne pas dans Firefox pour Mac.

Vous pouvez obtenir le même effet sur Firefox en utilisant l' -moz-zoom-in mot-clé.

cursor:url(/img/magnify.cur), -moz-zoom-in, auto;

Cela permettra de montrer agrandir.cur, Mozilla spécifiques curseur de zoom ou d'un système de curseur par défaut. Le premier curseur sur la liste que le navigateur prend en charge est utilisé.

Vous pouvez également voir une liste de curseur mots-clés pris en charge par les différents navigateurs.

Answer 2

Cela a fait l'affaire :)

 a.heroshot img {
cursor:url(/img/layout/backgrounds/moz-zoom.gif), -moz-zoom-in;
}
 

Answer 3

MISE À JOUR: L'icône d'agrandissement est maintenant prise en charge nativement dans la plupart des navigateurs, vous pouvez donc simplement utiliser ce CSS:

 cursor: -webkit-zoom-in
cursor: -moz-zoom-in
cursor: zoom-in
 

Answer 4

Que faire si vous enfermez la chaîne d'URL avec des apostrohes?

 a.heroshot img {
cursor:url('/img/magnify.cur'), pointer;
}
 

Voir également http://www.w3schools.com/CSS/pr_class_cursor.asp

Answer 5

 //My side url property is working for cursor in following way 

 #myid{cursor:url('myimage.png') , auto}

 //But here I think image size issue. Because If I use 32*32 size or below this then this work perfectly.

 //A comma separated list of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used

 #myid{cursor:url('myimage.png') , auto}
 #myid{cursor:url('myimage.png') ,url('myimage2.gif') , auto} etc


 //If you put only this then it will not work 

 #myid{cursor:url('myimage.png')}