Pourquoi mon image de curseur personnalisée pour l'agrandissement de l'image ne fonctionne-t-elle pas dans Firefox ?

Image de curseur personnalisée pour l'agrandissement de l'image

Si vous souhaitez améliorer l'expérience utilisateur en remplaçant le curseur par défaut par une image personnalisée telle qu'une loupe glass au survol de certains éléments de l’image, CSS peut proposer une solution. Cependant, des comportements inattendus peuvent survenir.

Dans l'exemple décrit, une URL de curseur est définie à l'aide de CSS :

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

Bien que le curseur magnify.cur soit correctement localisé, ce code s'affiche de manière inefficace. Les enquêtes révèlent que ce comportement provient de problèmes de compatibilité avec Firefox sur la plateforme Mac. Pour Firefox, une solution JavaScript ou une approche alternative est requise.

Compatibilité Firefox

Pour Firefox, le mécanisme d'URL du curseur n'est pas pris en charge. Comme alternative, le mot-clé "-moz-zoom-in" peut être utilisé pour obtenir un effet similaire.

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

Avec cette modification, Firefox donnera la priorité à l'affichage de magnify.cur, suivi du fichier spécifique à Mozilla. curseur de zoom ou un curseur système de secours.

Compatibilité avec les navigateurs

Curseur les mots-clés et leur prise en charge varient selon les navigateurs. Pour une référence complète, consultez la ressource liée fournie dans la réponse originale, qui détaille les mots-clés de curseur compatibles pour différents navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!