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

Question

是否可以将外部图像 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/

原文由 Yarin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

它不起作用，因为您的图像太大 - 图像尺寸有限制。例如，在 Firefox 中，大小限制为 128x128px。有关详细信息，请参阅 此页面。

此外，您还必须添加 auto 。

jsFiddle 演示在这里- 注意这是一个实际的图像，而不是默认光标。

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

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

原文由 Josh Crozier 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我会把它作为评论，但我没有代表。 Josh Crozier 的回答是正确的，但对于 IE .cur 和 .ani 是唯一支持的格式。所以你可能应该有一个后备以防万一：

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

原文由 CFraser 发布，翻译遵循 CC BY-SA 3.0 许可协议