图片替代鼠标光标

图片替代鼠标光标

原理：

利用css中cursor的url属性

代码：

.cursorPen{
    cursor: url("../../assets/projectApproval_images/pen.ico") 0 32,auto;
  }

注意：

1.光标图片最还为ico文件，ani等格式亦可。单浏览器兼容较差。png格式实测不行

2.，auto意为若是图片光标没法使用，则使用auto。不可省略

3.vue中使用时可能会报ico文件解析错误：

解决方法：

配置ico的url_loader,以下：（vue3.0）

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('image')
      .test(/\.ico$/)
      .use('url-loader')
      .loader('url-loader')
  }
}

 

 

钻研不易，转载请注明出处。。。。