2021-10-30 cursor不同场景下的应用

最新推荐文章于 2025-07-08 08:34:00 发布

MDISLXT

最新推荐文章于 2025-07-08 08:34:00 发布

阅读量380

点赞数

CC 4.0 BY-SA版权

文章标签： css

本文链接：https://blog.csdn.net/weixin_43552533/article/details/121053748

本文详细探讨了CSS中的cursor属性如何在各种交互场景下发挥作用，包括但不限于链接、拖放操作、缩放和自定义光标效果等方面，帮助开发者提升用户体验。

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

描述：cursor定义了鼠标指针放在一个元素边界范围内时所用的光标形状

值	描述	应用场景
url	需使用的自定义光标的 URL，即可以是相对路径也可以是绝对路径。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。例：cursor:url("./img/pointer.jpg"),auto;	自定义光标
auto	默认。浏览器根据当前内容决定指针样式。例如当内容是文字时使用text样式
null	无指针被渲染
default	默认光标（通常是一个箭头）	默认
pointer	光标呈现为指示链接的指针（一只手）	链接及状态
progress	程序后台繁忙，用户仍可交互 (与wait相反)	链接及状态
wait	此光标指示程序正忙（通常是一只表或沙漏）。	链接及状态
context-menu	指针下有可用内容目录。	链接及状态
help	此光标指示可用的帮助（通常是一个问号或一个气球）。	链接及状态
cell	指示单元格可被选中	选择
crosshair	光标呈现为十字线。	选择
text	指示文字可被选中	选择
vertical-text	指示垂直文字可被选中	选择
alias	复制或快捷方式将要被创建	拖拽
not-allowed	禁用	拖拽
no-drop	当前位置不能扔下bug 275173Windows或Mac OS X中 “no-drop 与not-allowed相同”.	拖拽
copy	指示可复制	拖拽
move	此光标指示某对象可被移动。	拖拽
grab	可抓取。注:grab和grabbing在比较后期才被支持	拖拽
grabbing	抓取中	拖拽
zoom-in	指示可被放大	缩放
zoom-out	指示可被缩小	缩放
all-scroll	元素可任意方向滚动（平移）.bug 275174Windows中, “all-scroll 与 move相同”.	重设大小及滚动
col-resize	元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头	重设大小及滚动
row-resize	元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头	重设大小及滚动
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。