CSS change custom curseur image origin (hotspot) to center

je veux utiliser une image personnalisée pour un curseur.

c'est très bien, mais de ce que je peux voir - l'origine (pointe de flèche) est par défaut au point supérieur gauche de mon image.

Comment puis-je régler l'origine pour être le centre de mon image.

Voici un tripoter pour démontrer le problème

div
{
    width: 600px;
    height: 100px;
    background: pink;
    cursor: url(http://placehold.it/50x30) , auto
}

Notez que lorsque j'essaie de sélectionner le texte - il sélectionne à partir du haut à gauche de l'image.

25
demandé sur Danield 2013-10-24 12:31:51
la source

3 ответов

Une solution serait de déplacer la position de votre image par le pointeur de la souris

cursor: url(image) [x y|auto];

Ne répond pas à la question, mais cela fonctionne

HTML

div
{
    width: 600px;
    height: 100px;
    background: pink;
    cursor: url(http://placehold.it/50x30) 25 15, auto;
}
48
répondu Romain 2013-10-24 12:38:14
la source

Vous pouvez régler par:

cursor:url(http://placehold.it/50x30) 25 15, auto;

les deux paramètres que j'ai ajoutés positionnent le centre de votre curseur.

14
répondu Igle 2015-07-01 14:18:59
la source

je viens de trouver ce à partir de mozilla:

prise en charge de la syntaxe CSS 3 pour les valeurs de curseur ajoutées dans Gecko 1.8 (Firefox 1.5):

curseur: [ [<x> <y>]?,]* mot clé permet de spécifier le coordonnées du point chaud du curseur, qui sera clampé à la les limites de l'image du curseur. Si aucune n'est spécifiée, les coordonnées des hotspots sont lus à partir du fichier lui-même (pour les fichiers CUR et XBM) ou sont placés en haut à gauche coin de l'image. Un exemple de CSS3 la syntaxe est:

.foo  {
    cursor:  auto;
    cursor:  url(cursor1.png) 4 12, auto;
}

.bar  {
    cursor:  pointer;
    cursor:  url(cursor2.png) 2 2, pointer;
} 

/ * repli sur 'auto' et 'pointer' dans IE, mais doit être défini séparément */ le premier nombre est la coordonnée x, et le second nombre est la coordonnée. L'exemple sera le point d'accès à la pixel (4,12) à partir du haut à gauche (0,0).

4
répondu Danield 2013-10-24 12:58:35
la source

Autres questions sur