CSS cursor

on
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:
  • auto
    Determined by browser/user agent
  • crosshair
    Similar to a + sign
  • default
    Platform dependent (typically an arrow)
  • pointer
    Cursor indicates a link
  • move
    Cursor indicates to the user that the element is to be moved.
  • <resize>
    • 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!