Interactivity
Cursor
Utilities for changes the cursor when hovering over an element.
Variant
Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited
API
| class | css | |
|---|---|---|
| cursor-auto | cursor: auto | Point Me |
| cursor-default | cursor: default | Point Me |
| cursor-none | cursor: none | Point Me |
| cursor-context-menu | cursor: context-menu | |
| cursor-help | cursor: help | Point Me |
| cursor-pointer | cursor: pointer | Point Me |
| cursor-progress | cursor: progress | Point Me |
| cursor-wait | cursor: wait | Point Me |
| cursor-cell | cursor: cell | Point Me |
| cursor-crosshair | cursor: crosshair | Point Me |
| cursor-text | cursor: text | Point Me |
| cursor-vertical-text | cursor: vertical-text | Point Me |
| cursor-alias | cursor: alias | Point Me |
| cursor-copy | cursor: copy | Point Me |
| cursor-move | cursor: move | Point Me |
| cursor-no-drop | cursor: no-drop | Point Me |
| cursor-not-allowed | cursor: not-allowed | Point Me |
| cursor-all-scroll | cursor: all-scroll | Point Me |
| cursor-col-resize | cursor: col-resize | Point Me |
| cursor-row-resize | cursor: row-resize | Point Me |
| cursor-n-resize | cursor: n-resize | Point Me |
| cursor-e-resize | cursor: e-resize | Point Me |
| cursor-s-resize | cursor: s-resize | Point Me |
| cursor-w-resize | cursor: w-resize | Point Me |
| cursor-ns-resize | cursor: ns-resize | Point Me |
| cursor-ew-resize | cursor: ew-resize | Point Me |
| cursor-ne-resize | cursor: ne-resize | Point Me |
| cursor-nw-resize | cursor: nw-resize | Point Me |
| cursor-se-resize | cursor: se-resize | Point Me |
| cursor-sw-resize | cursor: sw-resize | Point Me |
| cursor-nesw-resize | cursor: nesw-resize | Point Me |
| cursor-nwse-resize | cursor: nwse-resize | Point Me |
Usage
<div class="cursor-pointer">
...
</div>
HTML
.dummy {
@extend
.cursor-pointer;
}
SCSS