web-dev-qa-db-fra.com

CSS change l'origine du curseur personnalisé (hotspot) au centre

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

C'est bien, mais d'après ce que je peux voir - l'origine (pointe de flèche) est par défaut en haut à gauche de mon image.

Comment puis-je définir l'origine comme le centre de mon image.

Voici un extrait de démonstration pour illustrer le problème

div {
  width: 600px;
  height: 100px;
  background: pink;
  cursor: url(http://placehold.it/50x30), auto
}
<div>the cat in the hat<br> the cat in the hat<br> the cat in the hat<br> the cat in the hat</div>

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

csscustom-cursor
35
Danield

Une solution serait de déplacer la position de votre image pour qu'elle corresponde au 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;
}
58
Romain

Vous pouvez le définir en:

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

Les deux paramètres que j'ai ajoutés définissent le centre de votre curseur.

17
Igle

Je viens de trouver ça de mozilla :

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

le curseur: [ [<x> <y>]?,] * mot-clé Il permet de spécifier les coordonnées du hotspot du curseur, qui sera fixé aux limites de l'image du curseur. Si aucun n'est spécifié, les coordonnées du hotspot sont lues à partir du fichier lui-même (pour les fichiers CUR et XBM) ou sont définies dans le coin supérieur gauche de l'image. Un exemple de la syntaxe CSS3 est:

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

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

/ * se replie sur 'auto' et 'pointeur' dans IE, mais doit être défini séparément */ Le premier nombre est la coordonnée x et le deuxième nombre est la coordonnée y. L'exemple définira le hotspot comme étant le pixel à (4,12) en haut à gauche (0,0).

5
Danield