Curseur personnalisé à l'Image CSS
j'ai un certain nombre d'images heroshot, qui ont un popup modal lorsque cliqué.
J'essaie d'obtenir mon curseur se transformer 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 fait quelque chose de semblable? Une solution JavaScript ne me dérange pas s'il en existe une.
EDIT: il fonctionne en Safari, mais pas en Firefox.
6 réponses
votre problème peut être que les URLs du curseur ne fonctionnent pas dans Firefox pour le Mac.
Vous pouvez obtenir le même effet sur Firefox en utilisant le -moz-zoom-in mot clé.
cursor:url(/img/magnify.cur), -moz-zoom-in, auto;
cela montrera un grossissement.cur, le curseur de zoom spécifique à Mozilla ou un curseur par défaut du système. Le premier curseur sur la liste que le navigateur supporte est utilisé.
vous pouvez aussi voir un liste des mots-clés de curseur pris en charge par différents navigateurs.
c'est Ce qui a fait le tour :)
a.heroshot img {
cursor:url(/img/layout/backgrounds/moz-zoom.gif), -moz-zoom-in;
}
mise à JOUR: l'icône magnify est maintenant prise en charge nativement dans la plupart des navigateurs, donc vous pouvez simplement utiliser ce CSS:
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
et si vous enfermez la chaîne d'url avec des apostrophes?
a.heroshot img {
cursor:url('/img/magnify.cur'), pointer;
}
(Basé sur Kevin Frontières de réponse)
Le droit de l'ordre de repli est le suivant
a.heroshot img {
cursor: url(/img/zoom_in.png), url(/img/zoom_in.cur), pointer;
cursor: url(/img/zoom_in.png), -moz-zoom-in;
cursor: url(/img/zoom_in.png), -webkit-zoom-in;
}
Testé avec: Firefox 47, Chrome 51, Opera 36, Edge 13 et IE11.
ma propriété d'url de côté fonctionne pour le curseur de la manière suivante
#myid{cursor:url('myimage.png') , auto}
mais ici je pense que la taille de l'image question. Parce que si j'utilise la taille 32*32 ou en dessous de celle-ci alors cela fonctionne parfaitement.
une liste séparée par une virgule des URLs vers les curseurs personnalisés. Note: toujours spécifier un curseur générique à la fin de la liste, dans le cas où aucun des curseurs définis par L'URL ne peut être utilisé
#myid{cursor:url('myimage.png') , auto}
#myid{cursor:url('myimage.png') ,url('myimage2.gif') , auto} etc
Si vous mettez seulement cela, alors il ne fonctionnera pas
#myid{cursor:url('myimage.png')}