How do i change cursor to pointer in css?


Example

CSS can generate a bunch of different mouse cursors:

.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.col-resize {cursor: col-resize;}
.context-menu {cursor: context-menu;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: grab;}
.grabbing {cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}

Try it Yourself »


Definition and Usage

The cursor property specifies the mouse cursor to be displayed when pointing over an element.

Default value:auto
Inherited:yes
Animatable:no. Read about animatable
Version:CSS2
JavaScript syntax: object.style.cursor="crosshair" Try it


Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
cursor 5.0 5.5 4.0 5.0 9.6



CSS Syntax

Property Values

ValueDescriptionDemo
alias The cursor indicates an alias of something is to be created Play it »
all-scroll The cursor indicates that something can be scrolled in any direction Play it »
auto Default. The browser sets a cursor Play it »
cell The cursor indicates that a cell (or set of cells) may be selected Play it »
col-resize The cursor indicates that the column can be resized horizontally Play it »
context-menu The cursor indicates that a context-menu is available Play it »
copy The cursor indicates something is to be copied Play it »
crosshair The cursor render as a crosshair Play it »
default The default cursor Play it »
e-resize The cursor indicates that an edge of a box is to be moved right (east) Play it »
ew-resize Indicates a bidirectional resize cursor Play it »
grab The cursor indicates that something can be grabbed Play it »
grabbing The cursor indicates that something can be grabbed Play it »
help The cursor indicates that help is available Play it »
move The cursor indicates something is to be moved Play it »
n-resize The cursor indicates that an edge of a box is to be moved up (north) Play it »
ne-resize The cursor indicates that an edge of a box is to be moved up and right (north/east) Play it »
nesw-resize Indicates a bidirectional resize cursor Play it »
ns-resize Indicates a bidirectional resize cursor Play it »
nw-resize The cursor indicates that an edge of a box is to be moved up and left (north/west) Play it »
nwse-resize Indicates a bidirectional resize cursor Play it »
no-drop The cursor indicates that the dragged item cannot be dropped here Play it »
none No cursor is rendered for the element Play it »
not-allowed The cursor indicates that the requested action will not be executed Play it »
pointer The cursor is a pointer and indicates a link Play it »
progress The cursor indicates that the program is busy (in progress) Play it »
row-resize The cursor indicates that the row can be resized vertically Play it »
s-resize The cursor indicates that an edge of a box is to be moved down (south) Play it »
se-resize The cursor indicates that an edge of a box is to be moved down and right (south/east) Play it »
sw-resize The cursor indicates that an edge of a box is to be moved down and left (south/west) Play it »
text The cursor indicates text that may be selected Play it »
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 Play it »
vertical-text The cursor indicates vertical-text that may be selected Play it »
w-resize The cursor indicates that an edge of a box is to be moved left (west) Play it »
wait The cursor indicates that the program is busy Play it »
zoom-in The cursor indicates that something can be zoomed in Play it »
zoom-out The cursor indicates that something can be zoomed out Play it »
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit


HTML DOM reference: cursor property



How do I change cursor to pointer?

To change how the mouse pointer looks.
Open Mouse Properties by clicking the Start button. , and then clicking Control Panel. ... .
Click the Pointers tab, and then do one of the following: To give all of your pointers a new look, click the Scheme drop-down list, and then click a new mouse pointer scheme. ... .
Click OK..

How do I change the cursor style in HTML?

Style cursor Property.
Change the cursor: document. getElementById("demo"). style. cursor = "pointer"; Try it Yourself ».
Show all available cursors: var whichSelected = x. selectedIndex; document. body. style. cursor = x. ... .
Return the type of cursor: alert(document. getElementById("demo"). style. cursor); Try it Yourself ».

Which CSS property changes the mouse pointer?

The cursor CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element.