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.