Skip to content

cursor

cursor CSS 属性设置光标的类型(如果有),在鼠标指针悬停在元素上时显示相应样式。

<https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor>

取值

  • General
    • auto 浏览器根据当前内容决定指针样式,例如当内容是文字时使用 text 样式
    • default 默认指针,通常是箭头。
    • none 无指针被渲染(慎用)
  • 链接及状态
    • pointer 悬浮于连接上时,通常为手
    • progress 程序后台繁忙,用户仍可交互 (与 wait 相反).
    • wait 程序繁忙,用户不可交互
  • 选择
    • cell 指示单元格可被选中
    • crosshair 交叉指针,通常指示位图中的框选
    • text 指示文字可被选中
    • vertical-text 指示垂直文字可被选中
  • 拖拽
    • alias 复制或快捷方式将要被创建
    • copy 指示可复制
    • move 被悬浮的物体可被移动
    • no-drop 当前位置不能扔下(同 not-allowed)
    • grab 可抓取
    • grabbing 抓取中
  • 缩放
    • zoom-in 指示可被放大
    • zoom-out 指示可被缩小
  • 重设大小及滚动
    • 太偏门且多就不贴上来了,感兴趣自行看文档

Cursor

<https://www.tailwindcss.cn/docs/cursor>

ClassProperties
cursor-autocursor: auto;
cursor-defaultcursor: default;
cursor-pointercursor: pointer;
cursor-waitcursor: wait;
cursor-textcursor: text;
cursor-movecursor: move;
cursor-helpcursor: help;
cursor-not-allowedcursor: not-allowed;
cursor-nonecursor: none;
cursor-context-menucursor: context-menu;
cursor-progresscursor: progress;
cursor-cellcursor: cell;
cursor-crosshaircursor: crosshair;
cursor-vertical-textcursor: vertical-text;
cursor-aliascursor: alias;
cursor-copycursor: copy;
cursor-no-dropcursor: no-drop;
cursor-grabcursor: grab;
cursor-grabbingcursor: grabbing;
cursor-all-scrollcursor: all-scroll;
cursor-col-resizecursor: col-resize;
cursor-row-resizecursor: row-resize;
cursor-n-resizecursor: n-resize;
cursor-e-resizecursor: e-resize;
cursor-s-resizecursor: s-resize;
cursor-w-resizecursor: w-resize;
cursor-ne-resizecursor: ne-resize;
cursor-nw-resizecursor: nw-resize;
cursor-se-resizecursor: se-resize;
cursor-sw-resizecursor: sw-resize;
cursor-ew-resizecursor: ew-resize;
cursor-ns-resizecursor: ns-resize;
cursor-nesw-resizecursor: nesw-resize;
cursor-nwse-resizecursor: nwse-resize;
cursor-zoom-incursor: zoom-in;
cursor-zoom-outcursor: zoom-out;

共 20 个模块,1301 篇 Markdown 文档。