CSS cursor Property

Description

The cursor property specifies the type of cursor to be displayed for the pointing device when over the element's border, padding, and content.

Initial value: auto
Applies to: All elements
Inherited: Yes
Media: Visual, Interactive
Computed value: As specified, but with relative URI converted into absolute URI
Animatable: No
CSS Version: CSS2, CSS3
JavaScript syntax: object.style.cursor

Syntax

cursor: [ [<uri> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ] ] | inherit

Values

Move mouse over values to see cursors in action

General Purpose Cursors:

autoThe browser determines the cursor to display based on the current context.
defaultThe platform-dependent default cursor. Often rendered as an arrow.
noneNo cursor is rendered for the element.

Links and Status Cursors:

context-menuA context menu is available for the object under the cursor. Often rendered as an arrow with a small menu-like graphic next to it.
helpHelp is available for the object under the cursor. Often rendered as a question mark or a balloon.
pointerThe cursor is a pointer that indicates a link.
progressThe program is busy in the background but the user can still interact with the interface.
waitIndicates that the program is busy and the user should wait. Often rendered as a watch or hourglass.

Selection Cursors:

cellIndicates that a cell or set of cells may be selected. Often rendered as a thick plus-sign with a dot in the middle.
crosshairA simple crosshair (e.g., short line segments resembling a "+" sign). Often used to indicate a two dimensional bitmap selection mode.
textIndicating text can be selected, typically an I-beam.
vertical-textIndicating that vertical text can be selected, typically a sideways I-beam.

Drag and Drop Cursors:

aliasIndicates an alias of/shortcut to something is to be created. Often rendered as an arrow with a small curved arrow next to it.
copyIndicates something is to be copied. Often rendered as an arrow with a small plus sign next to it.
moveIndicates something is to be moved.
no-dropIndicates that the dragged item cannot be dropped at the current cursor location. Often rendered as a hand or pointer with a small circle with a line through it.
not-allowedIndicates that the requested action will not be carried out. Often rendered as a circle with a line through it.

Resizing and Scrolling Cursors:

n-resizeSome edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
ne-resizeAs above
e-resizeAs above
se-resizeAs above
s-resizeAs above
sw-resizeAs above
w-resizeAs above
nw-resizeAs above
ew-resizeIndicates a bidirectional resize cursor.
ns-resizeAs above
nesw-resizeAs above
nwse-resizeAs above
col-resizeIndicates that the item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.
row-resizeIndicates that the item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
all-scrollIndicates that the something can be scrolled in any direction. Often rendered as arrows pointing up, down, left, and right with a dot in the middle.

Zooming Cursors:

zoom-inIndicates that something can be zoomed (magnified) in.
zoom-outIndicates that something can be zoomed (magnified) out.

Image Cursors:

<uri>The user agent retrieves the cursor from the resource designated by the URI. If the user agent cannot handle the first cursor of a list of cursors, it must attempt to handle the second, etc. If the user agent cannot handle any user-defined cursor, it must use the cursor keyword at the end of the list.

Example

HTML

<div class="hidden">Please wait ...

   <div class="button">Point at me.</div> 

</div>

CSS

.hidden {
   visibility: hidden; 
   width: 125px; 
   text-align: center;
}
.button {
   visibility: visible;
   border: 1px solid orange;
}
.hidden:hover {
   visibility: visible; 
   cursor: wait; 
}

Result