Little Web Hut

CSS 2.1 Reference: cursor Property

CSS cursor Property
Syntax
selector {cursor: URI, URI, value;}
  • The URI values are OPTIONAL and can occur 0 or more times with a comma following each URI. Above is a sample of a URI occurring two times.
  • value is specified by using one of the following keywords: auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help, or progress.
(OR)
selector {cursor: value;}
  • value is specified by using the keyword inherit.
Usage

The cursor property is used to specify the cursor image, for the mouse or other pointing device, while hovering over the element.

This property is specified by using zero or more URI values followed by a keyword, according to the syntax shown above. If one or more URI values are specified then the first URI will be tried first. If the first URI cannot be used then the second URI will be tried, and so on. If none of the URI values can be used then the cursor will be set to the specified keyword. Note: URI cursor values may not be supported by some browsers.


CSS Example: The cursor property is set using a keyword.
h1 {cursor: pointer;}
Test It HTML StyleTest It XHTML StyleTest It HTML5 Style

Keywords

Hover the mouse, or other pointing device, over the following keywords to view a cursor sample.

  • auto
  • crosshair
  • default
  • pointer
  • move
  • e-resize
  • ne-resize
  • nw-resize
  • n-resize
  • se-resize
  • sw-resize
  • s-resize
  • w-resize
  • text
  • wait
  • help
  • progress
  • inherit - A single inherit keyword is used to specify that the values for this property should be taken from the parent element. If inherit is used with the root element, then the initial values for this property will be used. When the inherit keyword is used, no other property values are allowed.

Note: The cursor samples, shown above, may not appear identically in all browsers and/or operating systems.

Applies To All elements
Inherited Yes
Initial Value auto


cursor Property Examples
Test It HTML StyleTest It HTML StyleTest It HTML5 StyleThe cursor property is set using a keyword.