HTML：自定义修改鼠标指针

简介

鼠标指针有如下样式：

有时候，会需要鼠标移入修改为自定义的鼠标指针，或者是修改页面中的鼠标指针，达到不同的效果。

具体实现

使用鼠标指针的CSS属性 cursor: url(‘.png图片地址’), auto;
auto，也可写其他的cursor的属性值，此处用以找不到url图片资源时（建议30x30像素的），则使用后一个属性。

！！！需要注意的是图片素材不要太大，一般是 30*30范围内, 否则没有效果！！！

1. 移入的自定义鼠标指针
（1）方式一：CSS

// html
<div class="myBox"></div>
// css
.myBox {
  cursor: url('../../assetsimage/xuanranimg.png'), pointer
  // cursor: url('~/assetsimage/xuanranimg.png'), pointer
  // cursor: url('@/assetsimage/xuanranimg.png'), pointer
  // cursor: url('http://m.qpic.cn/psc?/V13dUHVk0Pe4ls/bqQfVz5yrrGYSXMvKr.cqeBNmgWO0Lgic8tXhzIHInZwTPZRK*fjgbCusKpq6PinpNt0MXcIV977rKJp9OmcY*vZmFxFOqDszqAN1mUrRPs!/mnull&bo=IAAgAAAAAAADByI!&rf=photolist&t=5'), pointer
}

（2）方式二：行内变量拼接
注意：这里的 `` 是模板字符窜，不是单引号！！！

// img: require('@/assets/image/xuanranimg.png')
<div :style="{cursor: `url(${img}), auto`}"></div>

2. 改变整个页面的鼠标指针
点击某个元素后，再JS改变鼠标指针（以下是VUE环境的写法，其他大致类似）

// html
<div @click="clickedFun">点击<div>
// js
data() {
  return {
    img: require('@/assets/image/xuanranimg.png')
  }
},
methods() {
  clickedFun() {
     let body = document.querySelector('body') // 这里是把整个页面的鼠标指针都变了，可以指定某个元素范围内
     body.style.cursor = `url(${this.img}), pointer` // 注意：这里的 `` 是模板字符窜，不是单引号！！！
  }
}

最后

觉得有用的朋友请用你的金手指点一下赞，或者评论留言一起探讨技术！