2013-08-31 12 views
36

CSS özel imleçleri için harici resim URL'leri kullanmak mümkün mü? Aşağıdaki örnek çalışmaz:CSS özel işaretçileri için harici görüntüleri kullanma

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/

+0

benzer [Özel İmleç Görüntü CSS] (http://stackoverflow.com/questions/336925/custom-cursor-image-css) –

+0

olası yinelenen favicon.ico simgelerinin kullanımı, özel imleciniz için hangi görüntünün kullanılabileceğine dair sınırlamalar vardır. Daha küçük bir resim kullanmayı deneyin. – vmarche

+3

@ Zeaklous- Hiç bir notta değil- harici görüntülerle ilgili sorularım – Yarin

cevap

67
görüntü oldu çünkü çalışma değildi

çok büyük - görüntü boyutlarında kısıtlamalar var. Firefox'ta, örneğin, boyut sınırı 128x128 pikseldir. Daha fazla bilgi için bkz. this page. Ayrıca, auto'u da eklemeniz gerekir. Not: Bu, gerçek bir görüntüdür ve varsayılan bir imleç değildir.

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

+13

Boyut kısıtlamaları hakkında daha fazla bilgi: "Gecko (Firefox) 'da imleç büyüklüğü 128 × 128 pikseldir. Daha büyük imleç görüntüleri göz ardı edilir. Ancak, işletim sistemleri ve platformlarla maksimum uyumluluk için kendinizi 32 × 32 boyutunda sınırlandırmalısınız. " (Https://developer.mozilla.org/en-US/docs/Web/CSS/cursor/url?redirectlocale=en-US&redirectslug=CSS%2Fcursor%2Furl) – Yarin

+2

Aslında, mutlaka "auto" eklemeniz gerekmez "ikinci bir değer olarak, CSS imleç değerlerinden, url() dışında herhangi bir şey olabilir. Bir sebepten dolayı url() işe yaramazsa, geri arama olarak çalışır. –

+4

@SilverRingvee demek ** fallback ** eğer url ...;) teşekkürler – abhisekp

7

Ben bir yorum olarak bu koyardı, ama bunun için temsilcisi yok. Josh Crozier'in cevap verdiği doğrudur, ancak IE için .cur ve .ani bunun için desteklenen tek formatlardır. Yani muhtemelen her ihtimale karşı son çareleri olmalıdır:

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

[IE sürümleri için çalışma örneği] (https://stackoverflow.com/questions/7419314/custom-cursor-image-doesnt-work- in-all-ler # cevabı-35068297). –

İlgili konular