Comment définir des images de curseur personnalisées en CSS, en particulier dans Firefox ?

Utilisation d'images de curseur personnalisées en CSS

Vous souhaiterez peut-être occasionnellement utiliser une image de curseur personnalisée, telle qu'une loupe, pour un objet spécifique. élément sur une page Web. Bien que cela puisse être facilement réalisé dans de nombreux navigateurs, Firefox présente un défi unique.

Une méthode courante pour définir un curseur personnalisé consiste à utiliser CSS. Cependant, le code fourni par l'utilisateur, a.heroshot img {cursor:url(/img/magnify.cur), pointer;}, ne fonctionne malheureusement pas dans Firefox.

Le problème réside dans le fait que Firefox sur macOS ne prend pas en charge l'utilisation de définitions de curseur basées sur des URL. Pour résoudre ce problème, vous pouvez utiliser le mot-clé -moz-zoom-in à la place :

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

Ce code CSS mis à jour affichera l'image magnify.cur sur les navigateurs qui la prennent en charge, le curseur de zoom spécifique à Firefox sur Firefox, ou un curseur par défaut du système si aucun des deux n'est pris en charge. Le premier curseur de la liste que le navigateur reconnaît sera appliqué.

Il est important de noter que vous pouvez trouver en ligne une liste de mots-clés de curseur pris en charge par différents navigateurs pour garantir la compatibilité entre les plateformes.

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!