Syntax

Cursor

Setting the mouse cursor style.

Class	Declarations
`cursor:value`	`cursor: value;`
`cursor:none`	`cursor: none;`
`cursor:auto`	`cursor: auto;`
`cursor:default`	`cursor: default;`
`cursor:pointer`	`cursor: pointer;`
`cursor:text`	`cursor: text;`
`cursor:move`	`cursor: move;`
`cursor:vertical-text`	`cursor: vertical-text;`
`cursor:alias`	`cursor: alias;`
`cursor:all-scroll`	`cursor: all-scroll;`
`cursor:cell`	`cursor: cell;`
`cursor:col-resize`	`cursor: col-resize;`
`cursor:row-resize`	`cursor: row-resize;`
`cursor:context-menu`	`cursor: context-menu;`
`cursor:copy`	`cursor: copy;`
`cursor:crosshair`	`cursor: crosshair;`
`cursor:grab`	`cursor: grab;`
`cursor:grabbing`	`cursor: grabbing;`
`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:no-drop`	`cursor: no-drop;`
`cursor:not-allowed`	`cursor: not-allowed;`
`cursor:progress`	`cursor: progress;`
`cursor:wait`	`cursor: wait;`
`cursor:zoom-in`	`cursor: zoom-in;`
`cursor:zoom-out`	`cursor: zoom-out;`

<div class="cursor:pointer">Hover Me</div>

Basic usage

Set the cursor style

Use the cursor:pointer to change the mouse cursor when hovering an element.

Hovering the block to see the cursor style

<div class="cursor:pointer">Hover Me</div>

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="cursor:pointer:hover cursor:pointer@sm cursor:pointer@dark cursor:pointer@print">…</div>

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.