鼠标光标变成小手

郭辰羽

于 2021-11-11 10:39:39 发布

阅读量2.3k

点赞数

文章标签： javascript css html

本文链接：https://blog.youkuaiyun.com/qq_49552046/article/details/121262986

版权

这篇博客探讨了两种在网页中改变元素光标样式的实现方法。第一种是通过HTML和JavaScript，利用`@mouseover`和`@mouseout`事件动态修改元素的`cursor`样式；第二种方法则是直接在CSS中设置`cursor`属性，简洁高效。示例代码展示了如何在鼠标悬停时切换光标为指针和等待状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个功能是当鼠标移动到某个元素上面的时候改变光变的样式，我使用的方法是HTML+JS的方法进行实现

HTML

<img v-for="(item,index) in srcLista" :src="item" @click="substitute(item)" @mouseover="changeMask(true,index)" @mouseout="changeMask(false,index)" :id="'abc'+index">

changeMask(b,index){    
			    if(b){
			       	document.getElementById("abc"+index).style.cursor="pointer"; 
			    }else{
			        document.getElementById("abc"+index).style.cursor="wait"; 
				}
			},