CSS Cursor Pointers
Utilities for controlling the cursor style when hovering
over an element.
What is CSS cursor?
A CSS cursor specifies the mouse pointer style for elements.
The cursor
property in CSS controls the appearance of the mouse cursor when it hovers over an element. By default, web browsers display the standard arrow cursor for most elements and switch to the pointer cursor for interactive elements like links. However, developers can easily customize cursor styles using CSS. The default value of the cursor
property is set to 'auto'
, which allows the browser to determine the most appropriate cursor based on the element type.
Cursor Pointer Default
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 me
Cursor Pointer
Use cursor-pointer
to change the mouse cursor to indicate an interactive element (usually a pointing hand).
Hover me
Cursor Pointer Move
Use cursor-move
to change the mouse cursor to indicate something that can be moved.
Hover me
Cursor Pointer Move
Use cursor-text
to change the mouse cursor to indicate the text can be selected (usually an I-beam shape).
Hover me
Cursor Pointer Zoom
Use cursor-zoom-in
to change the mouse cursor to indicate something is zoom in.
Hover me
Cursor Pointer Zoom Out
Use cursor-zoom-out
to change the mouse cursor to indicate something is zoom out.
Hover me
Cursor Pointer Not Allowed
Use cursor-not-allowed
to change the mouse cursor to indicate something can not be interacted with or clicked.
Hover me
Cursor Pointer Wait
Use cursor-wait
to change the mouse cursor to indicate something is happening in the background (usually an hourglass or spinner).
Hover me