Appearance

Cursor

Style syntax for setting the mouse cursor style.

🚧This page is still under construction and some content may not be complete.

Overview [sr-only]

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

Basic usage

Set the cursor style

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

Hovering the button to see the cursor style

<button class="cursor:pointer">submit</button>

Conditionally apply

Apply styles in different states using selectors, media queries, etc.

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

Style syntax for setting foreground color of an element.

NEXT
Background

Style syntax for setting all background style properties at once.

MIT License © Aoyue Design LLC.