Syntax

Cursor

Setting the mouse cursor style.

Overview

ClassDeclarations
cursor:valuecursor: value;
cursor:nonecursor: none;
cursor:autocursor: auto;
cursor:defaultcursor: default;
cursor:pointercursor: pointer;
cursor:textcursor: text;
cursor:movecursor: move;
cursor:vertical-textcursor: vertical-text;
cursor:aliascursor: alias;
cursor:all-scrollcursor: all-scroll;
cursor:cellcursor: cell;
cursor:col-resizecursor: col-resize;
cursor:row-resizecursor: row-resize;
cursor:context-menucursor: context-menu;
cursor:copycursor: copy;
cursor:crosshaircursor: crosshair;
cursor:grabcursor: grab;
cursor:grabbingcursor: grabbing;
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:no-dropcursor: no-drop;
cursor:not-allowedcursor: not-allowed;
cursor:progresscursor: progress;
cursor:waitcursor: wait;
cursor:zoom-incursor: zoom-in;
cursor:zoom-outcursor: 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>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.