Cursor

Syntax

Class
Properties
cursor-auto
cursor: auto;
cursor-default
cursor: default;
cursor-pointer
cursor: pointer;
cursor-progress
cursor: progress;
cursor-wait
cursor: wait;
cursor-text
cursor: text;
cursor-cell
cursor: cell;
cursor-crosshair
cursor: crosshair;
cursor-move
cursor: move;
cursor-copy
cursor: copy;
cursor-alias
cursor: alias;
cursor-help
cursor: help;
cursor-not-allowed
cursor: not-allowed;
cursor-grab
cursor: grab;
cursor-grabbing
cursor: grabbing;
cursor-col-resize
cursor: col-resize;
cursor-row-resize
cursor: row-resize;
cursor-ew-resize
cursor: ew-resize;
cursor-ns-resize
cursor: ns-resize;
cursor-zoom-in
cursor: col-zoom-in;
cursor-zoom-out
cursor: zoom-out;
<div class="t1 mb-8">Hover your mouse over the blocks</div> <div class="t1 w-full @/py-8 @/px-32 @/bg-c-white flex flex-wrap @/m-8 @/shadow-4"> <div class="t1 cursor-auto">auto</div> <div class="t1 cursor-default">default</div> <div class="t1 cursor-pointer">pointer</div> <div class="t1 cursor-progress">progress</div> <div class="t1 cursor-wait">wait</div> <div class="t1 cursor-text">text</div> <div class="t1 cursor-cell">cell</div> <div class="t1 cursor-crosshair">crosshair</div> <div class="t1 cursor-move">move</div> <div class="t1 cursor-copy">copy</div> <div class="t1 cursor-alias">alias</div> <div class="t1 cursor-help">help</div> <div class="t1 cursor-not-allowed">not-allowed</div> <div class="t1 cursor-grab">grab</div> <div class="t1 cursor-grabbing">grabbing</div> <div class="t1 cursor-col-resize">col-resize</div> <div class="t1 cursor-row-resize">row-resize</div> <div class="t1 cursor-ew-resize">ew-resize</div> <div class="t1 cursor-ns-resize">ns-resize</div> <div class="t1 cursor-zoom-in">zoom-in</div> <div class="t1 cursor-zoom-out">zoom-out</div> </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
cursor-auto
t1 cursor-auto
.t1.cursor-auto { cursor: auto; }
cursor-default
t1 cursor-default
.t1.cursor-default { cursor: default; }
cursor-pointer
t1 cursor-pointer
.t1.cursor-pointer { cursor: pointer; }
cursor-progress
t1 cursor-progress
.t1.cursor-progress { cursor: progress; }
cursor-wait
t1 cursor-wait
.t1.cursor-wait { cursor: wait; }
cursor-text
t1 cursor-text
.t1.cursor-text { cursor: text; }
cursor-cell
t1 cursor-cell
.t1.cursor-cell { cursor: cell; }
cursor-crosshair
t1 cursor-crosshair
.t1.cursor-crosshair { cursor: crosshair; }
cursor-move
t1 cursor-move
.t1.cursor-move { cursor: move; }
cursor-copy
t1 cursor-copy
.t1.cursor-copy { cursor: copy; }
cursor-alias
t1 cursor-alias
.t1.cursor-alias { cursor: alias; }
cursor-help
t1 cursor-help
.t1.cursor-help { cursor: help; }
cursor-not-allowed
t1 cursor-not-allowed
.t1.cursor-not-allowed { cursor: not-allowed; }
cursor-grab
t1 cursor-grab
.t1.cursor-grab { cursor: grab; }
cursor-grabbing
t1 cursor-grabbing
.t1.cursor-grabbing { cursor: grabbing; }
cursor-col-resize
t1 cursor-col-resize
.t1.cursor-col-resize { cursor: col-resize; }
cursor-row-resize
t1 cursor-row-resize
.t1.cursor-row-resize { cursor: row-resize; }
cursor-ew-resize
t1 cursor-ew-resize
.t1.cursor-ew-resize { cursor: ew-resize; }
cursor-ns-resize
t1 cursor-ns-resize
.t1.cursor-ns-resize { cursor: ns-resize; }
cursor-zoom-in
t1 cursor-zoom-in
.t1.cursor-zoom-in { cursor: zoom-in; }
cursor-zoom-out
t1 cursor-zoom-out
.t1.cursor-zoom-out { cursor: zoom-out; }