圖片替代鼠標光標

圖片替代鼠標光標

原理：

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

 

 

鑽研不易，轉載請註明出處。。。。