web-dev-qa-db-fra.com

Image de curseur personnalisée CSS

J'ai un certain nombre d'images Heroshot, qui ont un popup modal 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.

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

cssfirefoxmouse-cursor
35
Chris J Allen

Votre problème peut être dû au fait que les URL de curseur ne fonctionnent pas dans Firefox pour 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 affichera magnify.cur, le curseur de zoom spécifique à Mozilla ou un curseur par défaut du système. Le premier curseur de la liste pris en charge par le navigateur est utilisé.

Vous pouvez également voir une liste des mots-clés du curseur prise en charge par différents navigateurs.

36
isani

Cela a fait l'affaire :)

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

PDATE: 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;
7
Kevin Borders

(D'après la réponse de Kevin Borders)

L'ordre de repli correct 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.

2
SandroMarques

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

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

Voir aussi http://www.w3schools.com/CSS/pr_class_cursor.asp

2
activout.se

Ma propriété d'URL latérale fonctionne pour le curseur de la manière suivante

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

Mais ici, je pense que le problème de taille d'image. Parce que si j'utilise une taille 32 * 32 ou inférieure, cela fonctionne parfaitement.

Une liste d'URL séparées par des virgules vers des curseurs personnalisés. Remarque: spécifiez toujours un curseur générique à la fin de la liste, au 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 ne mettez que cela, cela ne fonctionnera pas

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