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.