改变鼠标指针样式的方法【项目优化——cursor】

本文详细列举了所有鼠标指针样式属性,包括auto、default、none等,强调了cursor:auto的自适应性和cursor:url()的灵活性,推荐在特定场景下使用特殊插件如YoloMouse来丰富鼠标样式,提升用户体验。

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

以下是收集并整理了的,目前已发布的所有鼠标指针的样式属性:

auto 					浏览器根据元素类型,自动调整鼠标指针
default 				默认指针,通常是箭头
none 					无指针被渲染
context-menu  			指针下有可用内容目录
help 					指示帮助
pointer 				悬浮于连接上时,通常为手
progress 				程序后台繁忙,用户不忙 (与wait 相反)
wait 					程序繁忙,用户忙着嘞 (与progress 相反)图标一般为沙漏或者表
cell 					指示单元格可被选中
crosshair 				交叉指针,通常指示位图中的框选
text 					指示文字可被选中
vertical-text 			指示垂直文字可被选中
alias 					复制或快捷方式将要被创建
copy 					指示可复制
move 					被悬浮的物体可被移动
no-drop 				当前位置不能扔下
not-allowed 			不能执行
grab 				 	指示可抓取
grabbing 				指示抓取中
all-scroll				元素可任意方向滚动
col-resize 				元素可被重设宽度,通常被渲染为中间有一条竖线分割的左右两个箭头
row-resize 				元素可被重设高度,通常被渲染为中间有一条横线分割的上下两个箭头
n-resize 				指示上边将被移动
e-resize 				指示右边将被移动
s-resize 				指示下边将被移动
w-resize 				指示左边将被移动
ne-resize 				指示右上角将被移动
nw-resize 				指示左上角将被移动
se-resize 				指示右下角将被移动
sw-resize 				指示左下角将被移动
ew-resize 				指示左右重新设置大小
ns-resize 				指示上下重新设置大小
nesw-resize 			指示一三象限重新设置大小
nwse-resize 			指示二四象限重新设置大小
zoom-in 				指示可被放大
zoom-out 				指示可被缩小

在进行项目优化时,有很多类型不一样的内容。

为了符合用户体验,当光标指到此处,需要相应的鼠标指针进行一个样式的同步变化。

上面是鼠标指针样式属性的所有属性值。但依然有局限性,总不能把这些代码全部记住吧,成本太高了。

所有我一般会使用cursor:auto;这个属性,表示自适应,这个比较友好

但如果遇到特殊情景,需要用到特殊的鼠标指针,更好,更完美的表达。cursor: url();这将是一个不错的选择。url()里填写插件地址,利用比较优秀的插件的可以获得多种多样的指针样式。这里推荐使用YoloMouse等比较知名的插件。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小猫娃来啦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值