爲CSS自定義光標使用外部圖像

是否可以爲CSS自定義光標使用外部圖像URL？下面的例子不工作：爲CSS自定義光標使用外部圖像

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

小提琴：http://jsfiddle.net/wNKcU/4/

來源

2013-08-31 Yarin

的[自定義光標圖像CSS（http://stackoverflow.com/questions/336925/custom-cursor-image-css） –

以類似可能重複使用favicon.ico圖標，對於您的自定義光標可以使用哪種圖像是有限制的。嘗試使用較小的圖像。 – vmarche

@ Zeaklous-不是DUP在清一色我問外部圖像 – Yarin

這是行不通的，因爲你的形象是太大 - 圖像尺寸有限制。例如，在Firefox中，尺寸限制爲128x128px。有關更多詳細信息，請參見this page。

此外，您還必須添加auto。

jsFiddle demo here - 注意這是一個實際的圖像，而不是默認的光標。

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

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

來源

2013-08-31 18:14:26

+13

大小的限制更多信息：「在蛤蚧（火狐）光標的大小限制爲128×128像素。較大的光標圖像將被忽略，但您應該將自己限制爲32×32的大小，以便與操作系統和平臺保持最大的兼容性。「（從https://developer.mozilla.org/en-US/docs/Web/CSS/cursor/url?redirectlocale=en-US&redirectslug=CSS%2Fcursor%2Furl） – Yarin

實際上，您不一定需要添加「auto 「作爲第二個值，它可以是CSS遊標值的任何值，當然不包括url（）。如果url（）出於某種原因不起作用，它將作爲回調函數使用。 –

@SilverRingvee你的意思是**後備**如果url ...;）謝謝 – abhisekp

我會把這個作爲一個評論，但我沒有代表它。 Josh Crozier回答的是正確的，但對於IE .cur和.ani是唯一支持的格式。所以，你應該有一個後備，以防萬一：

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

來源

2015-08-10 18:22:48 CFraser

[IE版本的工作示例]（https://stackoverflow.com/questions/7419314/custom-cursor-image-doesnt-work-進全IES＃答案-35068297）。 –

爲CSS自定義光標使用外部圖像

回答

相關問題