/

HTML / CSS / JavaScript Tutorial

CSS Property: cursor

[this page | pdf | back links]

The CSS (CSS2) cursor property indicates the type of cursor to be displayed when pointing to an element. Usually this property is set in a manner that conventionally indicates what is likely to happen next (if the cursor is clicked).

 

Valid property values (other than inherit and initial) are:

 

Value

Description

alias

Indicates alias is to be created

all-scroll

Indicates that something can be scrolled in any direction

auto

(default value). Browser selects cursor format

cell

Indicates a cell (or set of cells) can be selected

context-menu

Indicates a context-menu is available

col-resize

Indicates column can be resized horizontally

copy

Indicates something to be copied

crosshair

Cursor appears as a crosshair

default

Cursor appears as the default cursor

e-resize

Indicates edge of box can be moved right (i.e. ‘east’)

ew-resize

Indicates a bidirectional resize cursor

grab

Indicates something can be grabbed

grabbing

Indicates something can be grabbed

help

Indicates help is available

move

Indicates can move something

n-resize

Indicates edge of box can be moved up (i.e. ‘north’)

ne-resize

Indicates edge of a box can be moved up and right (i.e. ‘north-east’)

nesw-resize

Indicates a bidirectional resize cursor

ns-resize

Indicates a bidirectional resize cursor

nw-resize

Indicates edge of a box can be moved up and left (i.e. ‘north-west’)

nwse-resize

Indicates a bidirectional resize cursor

no-drop

Indicates can’t drop dragged item here

none

No cursor shown

not-allowed

Indicates requested action won’t be executed

pointer

Indicates a link

progress

Indicates program is busy

row-resize

Indicates row can be resized vertically

s-resize

Indicates edge of box can be moved down (i.e. ‘south’)

se-resize

Indicates edge of a box can be moved down and right (i.e. ‘south-east’)

sw-resize

Indicates edge of a box can be moved down and left (i.e. ‘south-west’)

text

Indicates text may be selected

URL

A comma separated list of URLs pointing to custom cursors. You should ideally specify a generic cursor at the end of the list (in case none of the URL-defined cursors can be used)

vertical-text

Indicates vertical-text can be selected

w-resize

Indicates edge of box can be moved left (i.e. ‘west’)

wait

Indicates program is busy

zoom-in

Indicates something can be zoomed in

zoom-out

Indicates something can be zoomed out

 

Default Value:

auto

JavaScript syntax:

e.g. object.style.cursor="zoom-in"

Inherited:

Yes

Animatable:

No

 


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile