CSS cursor Property

CSS cursor property specifies the type of cursor to be displayed when the mouse pointer is hover over an element.

Usages

The following table outline the usages and version history of this property.

Default value:	auto
Applies to:	All elements
Inherited:	Yes
Version:	CSS2
JavaScript Syntax:	object.style.cursor = "copy"

Syntax

Here is a syntax for the CSS cursor property

cursor: auto | default | none | context-menu | help | pointer | progress | wait | cell | 
        crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | 
        grab | grabbing | 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 | 
        [url(cursor file)] | initial | inherit;

Property Values

The following table describes the values of this property.

Value	Example	Description
General
auto	Mouse Hover Here	Default. Browser set a cursor
default	Mouse Hover Here	No any special behavior for the cursor. Typically an arrow
none	Mouse Hover Here	No cursor is visible
Links & status
context-menu	Mouse Hover Here	Specifies that a context-menu is available
help	Mouse Hover Here	Specifies that a help information is available
pointer	Mouse Hover Here	Specifies that a element can be interacted, when click on it. Typically an hand
progress	Mouse Hover Here	Specifies that a progress indicator
wait	Mouse Hover Here	Specifies that process is running and the user should wait
Selection
cell	Mouse Hover Here	Specifies that a cells can be selected
crosshair	Mouse Hover Here	Specifies that a selection in a bitmap. Typically a simple crosshair
text	Mouse Hover Here	Specifies that text that can be selected
vertical-text	Mouse Hover Here	Specifies that vertical text can be selected
Drag and Drop
alias	Mouse Hover Here	Specifies that an alias or shortcut is created
copy	Mouse Hover Here	Specifies that something can be copied
move	Mouse Hover Here	Specifies that something can be moved
no-drop	Mouse Hover Here	Specifies that an item not able to drop at the current location
not-allowed	Mouse Hover Here	Specifies that something can not done
Resize & scrolling
all-scroll	Mouse Hover Here	Specifies that something can be scrolled in any direction
col-resize	Mouse Hover Here	Specifies that something can be resized only horizontally
row-resize	Mouse Hover Here	Specifies that something can be resized only vertically
n-resize	Mouse Hover Here	Specifies that some edge is to be moved up (north)
e-resize	Mouse Hover Here	Specifies that some edge is to be moved right (east)
s-resize	Mouse Hover Here	Specifies that some edge is to be moved down (south)
w-resize	Mouse Hover Here	Specifies that some edge is to be moved left (west)
ne-resize	Mouse Hover Here	Specifies that some edge is to be moved up and right (north/east)
nw-resize	Mouse Hover Here	Specifies that some edge is to be moved up and left (north/west)
se-resize	Mouse Hover Here	Specifies that some edge is to be moved down and right (south/east)
sw-resize	Mouse Hover Here	Specifies that some edge is to be moved down and left (south/west)
ew-resize	Mouse Hover Here	bidirectional resize cursor
ns-resize	Mouse Hover Here
nesw-resize	Mouse Hover Here
nwse-resize	Mouse Hover Here
Zoom and Grab
zoom-in	Mouse Hover Here	Specifies that something can be zoomed in
zoom-out	Mouse Hover Here	Specifies that something can be zoomed out
grab	Mouse Hover Here	Specifies that something can be dragged to be moved somewhere
grabbing	Mouse Hover Here	Specifies that something can be grabbed
Custom
url(location)	Mouse Hover Here	Specifies the cursor resource location
Initial & Inherit
initial		Sets default value of this property
inherit		Inherits this property from its parent element

Examples

The example below shows to sets cursor property.

<span style="cursor: auto;">auto</span>
<span style="cursor: default;">default</span>
<span style="cursor: none;">none</span>

<span style="cursor: context-menu;">context-menu</span>
<span style="cursor: help;">help</span>
<span style="cursor: pointer;">pointer</span>
<span style="cursor: progress;">progress</span>
<span style="cursor: wait;">wait</span>

<span style="cursor: cell;">cell</span>
<span style="cursor: crosshair;">crosshair</span>
<span style="cursor: text;">text</span> 
<span style="cursor: vertical-text;">vertical-text</span>

<span style="cursor: alias;">alias</span>
<span style="cursor: copy;">copy</span>
<span style="cursor: move;">move</span>
<span style="cursor: no-drop;">no-drop</span>
<span style="cursor: not-allowed;">not-allowed</span>

<span style="cursor: grab;">grab</span>
<span style="cursor: grabbing;">grabbing</span>
<span style="cursor:e-resize">e-resize</span>
<span style="cursor: n-resize;">n-resize</span>
<span style="cursor: ne-resize;">ne-resize</span>
<span style="cursor: nw-resize;">nw-resize</span>
<span style="cursor: s-resize;">s-resize</span>
<span style="cursor: se-resize;">se-resize</span>
<span style="cursor: sw-resize;">sw-resize</span>
<span style="cursor: w-resize;">w-resize</span>
<span style="cursor: ew-resize;">ew-resize</span>
<span style="cursor: ns-resize;">ns-resize</span>
<span style="cursor: nesw-resize;">nesw-resize</span>
<span style="cursor: nwse-resize;">nwse-resize</span>

<span style="cursor: col-resize;">col-resize</span>
<span style="cursor: row-resize;">row-resize</span>
<span style="cursor: all-scroll;">all-scroll</span>
<span style="cursor: zoom-in;">zoom-in</span>
<span style="cursor: zoom-out;">zoom-out</span>

Run it... »

Browser Compatibility

Google Chrome 5+
Mozilla Firefox 4+
Internet Explorer 5.5+
Opera 9.6+
Safari 5+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.