L'utilisation des images pour CSS curseurs personnalisés

Est-il possible d'utiliser des Url de l'image pour CSS curseurs personnalisés? 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/

  • double possible de Curseur Personnalisé à l'Image CSS
  • Similaire à l'utilisation de favicon.ico icônes, il y a des limites à ce genre d'image peut être utilisé pour la réalisation de votre curseur. Essayez d'utiliser une image plus petite.
  • Pas une dup, je veux parler des images externes
  • Merci, bon à savoir
InformationsquelleAutor Yarin | 2013-08-31
  1. 78

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

    En outre, vous devez également ajouter dans auto.

    jsFiddle démo ici - notez que c'est une image réelle, et non pas un curseur par défaut.

    CSS:

    .test {
  background:gray;
  width:200px;
  height:200px;
  cursor:url(http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif), auto;
}

    HTML:

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

    • Plus d'informations sur les restrictions de taille: "Dans Gecko (Firefox), la limite de la taille du curseur est de 128×128px. Les grandes images de curseur sont ignorés. Cependant, vous devez vous limiter à la taille 32×32 pour un maximum de compatibilité avec les systèmes d'exploitation et plates-formes." (À partir de developer.mozilla.org/en-US/docs/Web/CSS/cursor/...)
    • En fait, vous n'avez pas nécessairement besoin d'ajouter "auto" comme une deuxième valeur, il pourrait être n'importe quoi à partir de CSS valeurs du curseur, l'url() exclus de cours. Il fonctionne comme un rappel si l'url() pour une raison quelconque ne fonctionne pas.
    • tu veux dire secours si l'url... 😉 merci
    InformationsquelleAutor Josh Crozier
  2. 8

    Je mettrais ce qu'un commentaire, mais je n'ai pas de rep pour elle. Ce que Josh Crozier répondu est correct, mais pour IE .cur et .ani sont les seuls formats pris en charge pour cela. Donc, vous devriez probablement avoir une de secours, juste au cas où:

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

    Dans certains cas, vous devriez envisager de réglage de l'offset (ancre):

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

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

    InformationsquelleAutor yaya pro