CSS personnalisé curseur sur le point
Comment puis-je donner une coutume cliquez sur le point à curseurs créé par cursor: url(theCursorUrl);
?
par exemple, vous êtes à l'aide d'une main(grab) image du curseur. Mais vous voulez que le milieu de l'image pour être le point où le curseur de points.
OriginalL'auteur user706071 | 2011-04-13
Vous devez vous connecter pour publier un commentaire.
CSS3 permet de configurer le milieu d'un curseur de l'image, où le hotspot du pointeur (c'est à dire le point où les clics sont enregistrés):
Où les deux
6
valeurs moyenne de 6 pixels de la gauche et de 6 pixels à partir du haut, respectivement. La valeur par défaut hotspot est toujours le coin supérieur gauche de votre image, c'est à dire0 0
.Navigateur prenant en charge cette fonctionnalité peut être assez pauvre même si, comme il est un CSS3 fonctionnalité, il n'est donc pas quelque chose que vous devez compter sur encore. (Cela dit, Firefox a pris en charge à partir de la version 1.5!) Si un navigateur ne peut pas interpréter les coordonnées, le
cursor
, la propriété sera ignoré, donc soyez prudent.OriginalL'auteur BoltClock
C'est plutôt une question délicate, si vous voulez la compatibilité du navigateur de votre curseur personnalisé (lorsque le hotspot n'est pas dans le coin supérieur gauche).
Tout d'abord, vous êtes contraint par IE à utiliser .cur format. L' .cur format aussi encapsule le hotspot position. Vous pouvez modifier .cur format (il existe des outils libres comme Monde Réel Éditeur de Curseur) pour définir le point d'accès pixel.
Malheureusement, chrome ignore la encapsulé hotspot de la .cur format pour quelque raison, et il le met par défaut à 0, 0. Si vous devez fournir ces coordonnées, mais cela fera IE ignorer l'ensemble de la propriété css...
Mon approche pour travailler avec des curseurs personnalisés avec les hotspots autres que 0,0 est ceci:
D'abord définir le point d'accès pixel sur l'obtention de coordonnées (9,7 dans cet exemple) à l'aide d'un .cur de l'éditeur. Ensuite, utilisez quelque chose comme ci-dessous. Cela permettra de couvrir IE, FF et Chrome
Chrome se lit maintenant le hotspot de CUR fichiers et si il est dans la propriété CSS le CSS a la préséance. Ce problème a été corrigé dans la version 36 je pense que, au moins, il est fixe.
grande nouvelle!
Salut @RaduSimionescu j'ai ajouté le code ci-dessus dans mon fichier css, et l'a trouvé ne fonctionne pas pour IE/Edge. Il affiche juste le curseur par défaut pour IE et Edge.
oui, cela a été posté comme il y a 5 ans... les choses auraient changé beaucoup de choses depuis.
OriginalL'auteur Radu Simionescu
La syntaxe de base est la suivante:
Cependant, il existe un certain nombre de bizarreries d'être conscient de qui font qu'il est assez difficile de travailler avec la croix-navigateur.
Le principal est que Internet Explorer exige que le curseur soit dans '.cur", format, tandis que les autres navigateurs ont besoin dans la norme de format de l'image (par exemple '.gif'). Si vous souhaitez prendre en charge tous les navigateurs, vous aurez besoin de créer à la fois, et d'écrire spécifiques à un navigateur de code.
Apparemment il ne fonctionne pas du tout dans l'Opéra.
La Quirksmode site a plein de détails de tous les bizarreries de s'attendre.
.cur
format de l'amende juste. Aussi,auto
est séparé de l'URI de la composante.ah, c'est bien. Je suppose que je suis plutôt Quirksmode trop de réponse définitive sur ce genre de chose. 🙂
OriginalL'auteur Spudley
CSS 3 hot spot de positionnement, mais ce n'est pas pris en charge par IE
https://developer.mozilla.org/en/Using_URL_values_for_the_cursor_property
OriginalL'auteur Andre Dublin