CSS cursor

The CSS cursor property is used for changing the appearance of your users' cursor (or pointing device) when they point at an element.

Syntax:

cursor: <value>

Possible Values:

e-resize
(East resize) cursor indicates to the user that the element is to be resized east
ne-resize
(North East resize) cursor indicates to the user that the element is to be resized north east
nw-resize
(North West resize) cursor indicates to the user that the element is to be resized north west
n-resize
(North resize) cursor indicates to the user that the element is to be resized north
se-resize
(South East resize) cursor indicates to the user that the element is to be resized south east
sw-resize
(South West resize) cursor indicates to the user that the element is to be resized south south west
s-resize
(South resize) cursor indicates to the user that the element is to be resized south south
w-resize
(West resize) cursor indicates to the user that the element is to be resized south west

text
Cursor indicates that text can be selected
wait
Cursor indicates that the program is busy. This is typically represented as an hour glass or watch.
help
Cursor indicates that help is available. This is typically represented as a question mark or balloon.
<uri>
Links to an external or custom cursor. This enables you to create your own cursors. Multiple values can be supplied, if the browser / user agent can't use the first one, it will try the second one etc. A generic cursor should be defined at the end of the list (for example, 'text' or 'pointer')
inherit

Initial Value:

Auto

Applies to:

All elements

Inherited:

Yes

Media:

Visual, Interactive

Example:


.help { cursor: help }
.quack { cursor : url("duck.cur"), url("dog.cur"), pointer }

Try it yourself!

Enjoy this website?

Link to this page (copy/paste into your own website or blog):
<a href="http://www.quackit.com/css/properties/css_cursor.cfm">CSS cursor</a> from Quackit.com
Add this page to your favorite social bookmarks sites:
Add this page to your Favorites