网页中更换鼠标图标&让图标跟随鼠标

一、更换鼠标图标

语法：

/* 关键字值 */
cursor: pointer;
cursor: auto;

/* 使用 URL，并提供一个关键字值作为备用 */
cursor: url(hand.cur), pointer;

/* URL 和 xy 的坐标偏移值，最后提供一个关键字值作为备用 */
cursor:
  url(cursor1.png) 4 12,
  auto;
cursor:
  url(cursor2.png) 2 2,
  pointer;

/* 全局属性 */
cursor: inherit;
cursor: initial;
cursor: unset;

如果你要更换鼠标图标为自定义图像，可以参考如下代码：

body {
    cursor: url("./favicon.ico") 32 32 , auto;
}  

需要注意的是：

1、要更换的图像格式为 .ico（在我这里只有 .ico 生效，其他格式的图片都不生效，可能是兼容性的问题）

2、标签选择器为body,测试要确保body中有内容

3、注意不要忽略了   ，   我太粗心了，经常在这里出错

4、不同的user agents可能存在限制，使用超出浏览器支持的大小范围的图像进行的光标更改通常会被忽略。

二、设置鼠标跟随

原理：给图片定位以后，用js获取对应元素来控制图片定位跟随鼠标位置

1、html

2、css

3、js

实验效果：