CSS:cursor属性的常用值及含义

290 阅读1分钟
通用光标类型:
  • 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; /* 使用自定义图片 */