Example
Change the cursor:
document.getElementById("myP").style.cursor = "pointer";Try it Yourself »
Definition and Usage
The cursor property sets or returns the type of cursor to display for the mouse pointer.
Browser Support
The cursor property is supported in all major browsers.
Syntax
Return the cursor property:
object.style.cursor
Set the cursor property:
object.style.cursor=value
Property Values
| Value | Description |
|---|---|
| alias | The cursor indicates an alias of something is to be created |
| all-scroll | The cursor indicates that something can be scrolled in any direction |
| auto | Default. The browser sets a cursor |
| cell | The cursor indicates that a cell (or set of cells) may be selected |
| context-menu | The cursor indicates that a context-menu is available |
| col-resize | The cursor indicates that the column can be resized horizontally |
| copy | The cursor indicates something is to be copied |
| crosshair | The cursor render as a crosshair |
| default | The default cursor |
| e-resize | The cursor indicates that an edge of a box is to be moved right (east) |
| ew-resize | Indicates a bidirectional resize cursor |
| help | The cursor indicates that help is available |
| move | The cursor indicates something is to be moved |
| n-resize | The cursor indicates that an edge of a box is to be moved up (north) |
| ne-resize | The cursor indicates that an edge of a box is to be moved up and right (north/east) |
| nesw-resize | Indicates a bidirectional resize cursor |
| ns-resize | Indicates a bidirectional resize cursor |
| nw-resize | The cursor indicates that an edge of a box is to be moved up and left (north/west) |
| nwse-resize | Indicates a bidirectional resize cursor |
| no-drop | The cursor indicates that the dragged item cannot be dropped here |
| none | No cursor is rendered for the element |
| not-allowed | The cursor indicates that the requested action will not be executed |
| pointer | The cursor is a pointer and indicates a link |
| progress | The cursor indicates that the program is busy (in progress) |
| row-resize | The cursor indicates that the row can be resized vertically |
| s-resize | The cursor indicates that an edge of a box is to be moved down (south) |
| se-resize | The cursor indicates that an edge of a box is to be moved down and right (south/east) |
| sw-resize | The cursor indicates that an edge of a box is to be moved down and left (south/west) |
| text | The cursor indicates text that may be selected |
| URL | A comma separated list of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used |
| vertical-text | The cursor indicates vertical-text that may be selected |
| w-resize | The cursor indicates that an edge of a box is to be moved left (west) |
| wait | The cursor indicates that the program is busy |
| zoom-in | The cursor indicates that something can be zoomed in |
| zoom-out | The cursor indicates that something can be zoomed out |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technical Details
| Default Value: | auto |
|---|---|
| Return Value: | A String, representing the displayed mouse cursor when the mouse pointer is over an element |
| CSS Version | CSS2 |
More Examples
Example
Show all available cursors:
var whichSelected = x.selectedIndex;
document.body.style.cursor = x.options[whichSelected].text;
Try it Yourself »
Example
Return the type of cursor:
alert(document.getElementById("myP").style.cursor);
Try it Yourself »
Related Pages
CSS reference: cursor property
< Style Object