图片替代鼠标光标

图片替代鼠标光标

原理:

利用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')
  }
}

 

 

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

posted @ 2019-05-15 09:11  莫小龙  阅读(315)  评论(0编辑  收藏  举报