HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Change the cursor
The cursor property sets or returns the type of cursor to display for the mouse pointer.
Property | |||||
---|---|---|---|---|---|
cursor | Yes | Yes | Yes | Yes | Yes |
Return the cursor property:
Set the cursor property:
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 |
Default Value: | auto |
---|---|
Return Value: | A String, representing the displayed mouse cursor when the mouse pointer is over an element |
CSS Version | CSS2 |
Show all available cursors:
var whichSelected = x.selectedIndex;
document.body.style.cursor = x.options[whichSelected].text;
Return the type of cursor:
alert(document.getElementById("demo").style.cursor);
CSS reference: cursor property