Cursor

Utilities for controlling the cursor style when hovering over an element


Class reference

ClassProperties
cursor-autocursor: auto;
cursor-defaultcursor: default;
cursor-pointercursor: pointer;
cursor-waitcursor: wait;
cursor-textcursor: text;
cursor-movecursor: move;
cursor-not-allowedcursor: not-allowed;

# Auto

Use .cursor-auto to allow the browser to change the cursor based on the current content (e.g. automatically change to text cursor when hovering over text).

Hover over this text
<div class="cursor-auto ...">
Hover over this text
</div>

# Default

Use .cursor-default to change the mouse cursor to always use the platform-dependent default cursor (usually an arrow).

Hover over this text
<div class="cursor-default ...">
Hover over this text
</div>

# Pointer

Use .cursor-pointer to change the mouse cursor to indicate an interactive element (usually a pointing hand).

Hover me
<div class="cursor-pointer ...">
Hover me
</div>

# Wait

Use .cursor-wait to change the mouse cursor to indicate something is happening in the background (usually an hourglass or watch).

Hover me
<div class="cursor-wait ...">
Hover me
</div>

# Text

Use .cursor-text to change the mouse cursor to indicate the text can be selected (usually an I-beam shape).

Hover me
<div class="cursor-text ...">
Hover me
</div>

# Move

Use .cursor-move to change the mouse cursor to indicate something that can be moved.

Hover me
<div class="cursor-move ...">
Hover me
</div>

# Not Allowed

Use .cursor-not-allowed to change the mouse cursor to indicate something can not be interacted with or clicked.

Hover me
<div class="cursor-not-allowed ...">
Hover me
</div>