使用 CSS 自定义光标的外部图像

CSS 自定义光标是否可以使用外部图像 URL？下面的例子不起作用：

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/ http://jsfiddle.net/wNKcU/4/

它不起作用，因为您的图像太大 - 图像尺寸有限制。例如，在 Firefox 中，大小限制为 128x128px。看这一页 https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#icon_size_limits更多细节。

此外，您还必须添加auto.

jsFiddle 演示在这里 http://jsfiddle.net/wNKcU/5/- 请注意，这是实际图像，而不是默认光标。

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

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