Change the cursor:
document.getElementById("myP").style.cursor = "pointer";
<!DOCTYPE html> <html> <body> <p id="myP">Mouse over this text before and after you have clicked the button below!</p> <button type="button" onclick="myFunction()">Change cursor</button> <script> function myFunction() {// w w w .j av a2 s . c om document.getElementById("myP").style.cursor = "pointer"; } </script> </body> </html>
The cursor property sets or gets the type of cursor to display for the mouse pointer.
Property Values
| Value | Description |
|---|---|
| alias | an alias of something is to be created |
| all-scroll | something can be scrolled in any direction |
| auto | Default. The browser sets a cursor |
| cell | a cell may be selected |
| context-menu | a context-menu is available |
| col-resize | the column can be resized horizontally |
| copy | something is to be copied |
| crosshair | render as a crosshair |
| default | The default cursor |
| e-resize | an edge of a box is to be moved right (east) |
| ew-resize | a bidirectional resize cursor |
| help | help is available |
| move | something is to be moved |
| n-resize | an edge of a box is to be moved up (north) |
| ne-resize | an edge of a box is to be moved up and right (north/east) |
| n-e-s-w-resize | a bidirectional resize cursor |
| ns-resize | a bidirectional resize cursor |
| nw-resize | an edge of a box is to be moved up and left (north/west) |
| n-w-s-e-resize | a bidirectional resize cursor |
| no-drop | the dragged item cannot be dropped here |
| none | No cursor is rendered for the element |
| not-allowed | the requested action will not be executed |
| pointer | a pointer and indicates a link |
| progress | the program is busy |
| row-resize | the row can be resized vertically |
| s-resize | an edge of a box is to be moved down (south) |
| se-resize | an edge of a box is to be moved down and right (south/east) |
| sw-resize | an edge of a box is to be moved down and left (south/west) |
| text | text that may be selected |
| URL | A comma separated list of URLs to custom cursors. |
| vertical-text | vertical-text that may be selected |
| w-resize | an edge of a box is to be moved left (west) |
| wait | the program is busy |
| zoom-in | something can be zoomed in |
| zoom-out | something can be zoomed out |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
The cursor property returns a String representing the displayed mouse cursor when the mouse pointer is over an element.