简介

鼠标指针有如下样式：

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

具体实现

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

！！！需要注意的是图片不要太大，否则没有效果！！！

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` } }

最后

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