Search within TutorialsPark

CSS cursor Property


To specify the visual of the cursor when a mouse is over an element


Definition and Notes.

1. The CSS cursor property is used to set the appearnace of the mouse pointer when it is over an element.

2.Normally, the behaviour of the cursor is determined by the browser, but you can set custom appearances as well.


Syntax:

CSS cursor property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:

Note-The actual appearance of cursor depends upon both the operating system as well as the browser .

Property Values

Value Description
alias Indicates that an alias or shortcut is to be created
all-scroll It defines the counter which is to be incremented.It defines the number by which the counter will get incremented on each occurence of a given selector.
auto Browser selects cursor based on current context
cell Indicates a cell or set of cells may be selected
context-menu Context menu is available for the current object
col-resize To denote that the column can be resized horizontally
copy To denote that something is to be copied
crosshair Displays two thin intersecting lines
default Default cursor - usually an arrow
e-resize To denote that the edge of the box is about to be moved right(east)
ew-resize To denote a bidirectional resize cursor
help Help is available
move Indicates that something is to be moved
n-resize To denote that the edge of the cursor is about to be moved up(north)
ne-resize To denote that the edge of the cursor is about to be moved in north east direction
nesw-resize To denote a bidirectional resize cursor
ns-resize To denote that the edge of the cursor is about to be moved in north south direction
nw-resize To denote that the edge of the cursor is about to be moved in north west direction
nwse-resize To denote a bidirectional resize cursor
ns-resize The cursor denotes that an edge of the box is about to be moved north/south
nw-resize The cursor denotes that an edge of the box is about to be moved north/west
nwse-resize To denote a bidirectional resize cursor
no-drop Indicates that the dragged item cannot be dropped at the current location
not-allowed The requested action will not be carried out
pointer To denote a link
progress To denote a progress or busy
row-resize To denote that the row can be resized vertically
s-resize The cursor denotes that an edge of the box is about to be moved south
se-resize The cursor denotes that an edge of the box is about to be moved south-east
sw-resize The cursor denotes that an edge of the box is about to be moved south-west
text To denote that the text can be selected
URL To specify paths of custom cursors
vertical-text The cursor denotes that the vertical text may be selected
w-resize The cursor denotes that an edge of the box is about to be moved left(west)
wait The cursor denotes that the program is busy
zoom-in The cursor denotes that the subject can be zoomed-in
zoom-out The cursor denotes that the subject can be zoomed-out
inherit The value is inherited by the parent element

Specifications

Specs Value
Name cursor
Value [<uri> [<number> <number>]?,]* [auto | default | auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair |text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize |ns-resize | nesw-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll]
Initial Value auto
Applies to all elements
Javascript syntax object.style.cursor="copy"
Inherited Yes
Computed Value Same as declared Value
Browser Support internetexplorer safari firefox opera chrome

Related Examples.