通用光标类型:
- auto 浏览器根据当前上下文自动选择合适的光标样式
- default ➡️ 默认箭头(通常用于非交互元素)
- none 没有光标可见,鼠标在元素上时不会显示任何指针。
- pointer 👆 手指形状(常用于可点击元素,如链接/按钮)
- text │ 文本输入 I 形(表示可编辑文本区域)
- move ✥ 十字箭头(元素可拖拽移动)
- not-allowed 🚫 禁止符号(不可交互状态)
- wait ⏳ 加载等待(系统繁忙状态)
- initial 恢复默认光标
特殊场景光标:
- help ❓ 问号(帮助提示)
- crosshair ➕ 十字线(绘图工具)
- grab 🖐 张开的手(可抓取状态)
- grabbing 🤚 抓紧的手(抓取中状态)
缩放相关:
- zoom-in 🔍 放大镜(+号)
- zoom-out 🔍 放大镜(-号)
滚动方向:
- e|s|w|n-resize 东南西北方向,可组合但南北得在前面,如:西北nw-resize
自定义光标:
cursor: url('custom.cur'), auto; /* 使用自定义图片 */