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` // 注意:这里的 `` 是模板字符窜,不是单引号!!!
}
}
最后
觉得有用的朋友请用你的金手指点一下赞,或者评论留言一起探讨技术!
更多推荐
所有评论(0)