it-swarm.com.de

Verwenden externer Bilder für benutzerdefinierte CSS-Cursor

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/

44
Yarin

Es hat nicht funktioniert, weil Ihr Bild zu groß war - die Bildabmessungen sind eingeschränkt. In Firefox ist die Größenbeschränkung beispielsweise 128 x 128 Pixel. Siehe diese Seite für weitere Details.

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

jsFiddle Demo hier - 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>
78
Josh Crozier

Ich würde dies als Kommentar setzen, aber ich habe nicht den Repräsentanten dafür. Was Josh Crozier antwortete, ist richtig, aber für IE .cur und .ani sind die einzigen unterstützten Formate. Sie sollten also wahrscheinlich einen Fallback haben, nur für den Fall:

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

In einigen Fällen sollten Sie den Versatz (Anker) festlegen:

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

in diesem Beispiel setzen wir offsetx auf 10 und offsety auf 3 (von oben links), sodass der Zeigefinger verankert ist. Geige: http://jsfiddle.net/5kxt1j98/ (Sie können den Unterschied sehen, indem Sie den Cursor oben links im Container bewegen)

1
yaya