web-dev-qa-db-fra.com

Utilisation d'images externes pour les curseurs personnalisés CSS

Est-il possible d'utiliser des URL d'image externes pour les curseurs personnalisés CSS? L'exemple suivant ne fonctionne pas:

HTML: 

<div class="test">TEST</div>

CSS: 

.test {
  background:gray;
  width:200px;
  height:200px;
  cursor:url('http://upload.wikimedia.org/wikipedia/commons/d/de/POL_Apple.jpg');
}

Violon: http://jsfiddle.net/wNKcU/4/

htmlcsscursor
44
Yarin

Cela ne fonctionnait pas parce que votre image était trop grande - il y a des restrictions sur les dimensions de l'image. Dans Firefox, par exemple, la taille limite est de 128x128px. Voir cette page pour plus de détails.

De plus, vous devez également ajouter auto.

démonstration de jsFiddle ici - notez qu'il s'agit d'une image réelle et non d'un curseur par défaut.

.test {
  background:gray;
  width:200px;
  height:200px;
  cursor:url(http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif), auto;
}
<div class="test">TEST</div>
78
Josh Crozier

Je mettrais cela comme un commentaire, mais je n'ai pas le représentant pour cela. Ce que Josh Crozier a répondu est correct, mais pour IE .cur et .ani sont les seuls formats pris en charge pour cela. Vous devriez donc probablement avoir un repli au cas où:

.test {
    cursor:url("http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif"), url(foo.cur), auto;
}
9
CFraser

Dans certains cas, vous devriez envisager de définir le décalage (ancre):

cursor:url(http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif) 10 3, auto;

dans cet exemple, nous plaçons offsetx à 10 et offsety à 3 (en haut à gauche), de sorte que le pointeur sera l'ancre. violon: http://jsfiddle.net/5kxt1j98/ (vous pouvez voir la différence en déplaçant le curseur en haut à gauche du conteneur)

1
yaya