互动性
cursor
用于控制鼠标悬停在元素上时的光标样式的工具。
类 | 样式 |
---|---|
cursor-auto | cursor: auto; |
cursor-default | cursor: default; |
cursor-pointer | cursor: pointer; |
cursor-wait | cursor: wait; |
cursor-text | cursor: text; |
cursor-move | cursor: move; |
cursor-help | cursor: help; |
cursor-not-allowed | cursor: not-allowed; |
cursor-none | cursor: none; |
cursor-context-menu | cursor: context-menu; |
cursor-progress | cursor: progress; |
cursor-cell | cursor: cell; |
cursor-crosshair | cursor: crosshair; |
cursor-vertical-text | cursor: vertical-text; |
cursor-alias | cursor: alias; |
cursor-copy | cursor: copy; |
cursor-no-drop | cursor: no-drop; |
cursor-grab | cursor: grab; |
cursor-grabbing | cursor: grabbing; |
cursor-all-scroll | cursor: all-scroll; |
cursor-col-resize | cursor: col-resize; |
cursor-row-resize | cursor: row-resize; |
cursor-n-resize | cursor: n-resize; |
cursor-e-resize | cursor: e-resize; |
cursor-s-resize | cursor: s-resize; |
cursor-w-resize | cursor: w-resize; |
cursor-ne-resize | cursor: ne-resize; |
cursor-nw-resize | cursor: nw-resize; |
cursor-se-resize | cursor: se-resize; |
cursor-sw-resize | cursor: sw-resize; |
cursor-ew-resize | cursor: ew-resize; |
cursor-ns-resize | cursor: ns-resize; |
cursor-nesw-resize | cursor: nesw-resize; |
cursor-nwse-resize | cursor: nwse-resize; |
cursor-zoom-in | cursor: zoom-in; |
cursor-zoom-out | cursor: zoom-out; |
cursor-(<custom-property>) | cursor: var(<custom-property>); |
cursor-[<value>] | cursor: <value>; |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用像 cursor-pointer
和 cursor-grab
这样的工具来控制哪个光标悬停在元素上时显示:
¥Use utilities like cursor-pointer
and cursor-grab
to control which cursor is displayed when hovering over an element:
悬停在每个按钮上以查看光标变化
<button class="cursor-pointer ...">Submit</button><button class="cursor-progress ...">Saving...</button><button class="cursor-not-allowed ..." disabled>Confirm</button>
使用自定义值(Using a custom value)
¥Using a custom value
使用 cursor-[<value>]
语法 根据完全自定义的值设置 cursor:
<button class="cursor-[url(hand.cur),_pointer] ..."> <!-- ... --></button>
对于 CSS 变量,还可以使用 cursor-(<custom-property>)
语法:
<button class="cursor-(--my-cursor) ..."> <!-- ... --></button>
这只是简写,用于 cursor-[var(<custom-property>)]
它会自动为你添加 var()
函数。
响应式设计(Responsive design)
¥Responsive design
在 cursor
工具前面使用断点变体如 md:
仅在 medium 屏幕尺寸及以上时应用工具:
<button class="cursor-not-allowed md:cursor-auto ..."> <!-- ... --></button>
请参阅 变体文档 详细了解如何使用变体。