Używanie zewnętrznych obrazów do niestandardowych kursorów CSS

Question

Czy można używać zewnętrznych adresów URL obrazków do niestandardowych kursorów CSS? Poniższy przykład nie działa:

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'); 
} 

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

Answer 1

To nie działa, ponieważ obraz był zbyt duże - istnieją ograniczenia dotyczące wymiarów obrazu. Na przykład w Firefoksie limit rozmiaru wynosi 128 x 128 pikseli. Aby uzyskać więcej informacji, patrz this page.

Dodatkowo musisz dodać także auto.

jsFiddle demo here - zauważ, że jest to rzeczywisty obraz, a nie domyślny kursor.

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

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

Answer 2

chciałbym umieścić to jako komentarz, ale nie mam rep dla niego. To, na co odpowiedział Josh Crozier, jest poprawne, ale dla IE .cur i .ani są to jedyne obsługiwane formaty. Więc powinieneś mieć zapasowe na wszelki wypadek:

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