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

问题描述

是否可以为CSS自定义光标使用外部图像URL？以下示例无效：

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

小提琴：

解决方案

这不是工作，因为你的图像太大 - 有图像尺寸的限制。例如，在Firefox中，大小限制为128x128像素。

此外，您还必须在 auto 中添加。

- note这是一个实际的图片，而不是默认光标。

  .test {background：gray; width：200px; height：200px; cursor：url（http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif），auto;}  

 < div class =test> TEST< / div   
Is it possible to use external image URLs for CSS custom cursors? The following example doesn't work:

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/
 解决方案 
It wasn't working because your image was too big - there are restrictions on the image dimensions. In Firefox, for example, the size limit is 128x128px.
Additionally, you also have to add in auto.
jsFiddle demo here - note that's an actual image, and not a default cursor.
.test {
  background:gray;
  width:200px;
  height:200px;
  cursor:url(http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif), auto;
}
<div class="test">TEST</div
                        
这篇关于对CSS自定义光标使用外部图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！