Verwenden externer Bilder für benutzerdefinierte CSS-Cursor

Question

Ist es möglich, externe Bild-URLs für benutzerdefinierte CSS-Cursor zu verwenden? Das folgende Beispiel funktioniert nicht:

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

Es hat nicht funktioniert, weil Ihr Bild war zu groß - es gibt Einschränkungen für die Bildmaße. In Firefox zum Beispiel ist die Größenbeschränkung 128x128px. Weitere Informationen finden Sie unter this page.

Zusätzlich müssen Sie auch auto hinzufügen.

jsFiddle demo here - Beachten Sie, dass es sich um ein tatsächliches Bild und nicht um einen Standardcursor handelt.

.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

Ich habe dies als Kommentar würde, aber ich habe nicht die rep dafür. Was Josh Crozier geantwortet hat, ist richtig, aber für IE .cur und .ani sind die einzigen unterstützten Formate dafür. Also sollten Sie wahrscheinlich ein Rückfall nur für den Fall haben:

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