Cascading Style Sheets/Cursor
CSS allows the cursor to be specified when a specific context is desired. The :hover selector does not need to be used.
|General purpose cursors
|Automatically determine the cursor based on the current context. Mouseover text to get an i-beam, a link to get a pointer, etc. The standard behavior.
|The default cursor, usually an arrow.
|You should not see the cursor.
|Links and status cursors
|Cursor indicating that there is a context menu there or the cursor is in context menu mode. Often an arrow cursor with a small representation of a context menu.
|Help cursor, often a question mark.
|A hand with index finger extended.
|Cursor indicating work being done in the background, the user is still able to interact with the controls. Usually an arrow cursor with a timepiece or spinner animation.
|A watch or timepiece of some kind.
|For selecting a cell or cells in a table, spreadsheet. A thick plus with often with a dot in the center.
|A crosshair for precision selecting.
|The I-beam cursor
|A horizontal I-Beam cursor for vertical text
|Drag and drop cursors
|Cursor indicating an alias, symbolic link or other file/data indirection. Often a curved arrow.
|Cursor indicating that the dragged item may be copied. Usually an arrow cursor with a +.
|The move cursor, usually a + with arrows on each end.
|Often a circle with a line through it
|Resizing and scrolling cursors
|East or right resize.
|East-West or horizontal resize.
|North-East or upper right resize.
|North-East-South-West or diagonal resize.
|North-West or upper left resize.
|North-West-South-East or diagonal resize.
|North or top resize.
|North-south or vertical resize.
|South-East or bottom right resize.
|South or bottom resize.
|West or left resize.
|Cursor that indicates scrolling in any direction. Often arrows in the four cardinal directions.
|A cursor indicating that it is ready to grab or pick up an item. Often an open hand.
|A cursor indicating that it has grabbed or is clasping/carrying an item. Often a fist.
|A cursor indicating zooming in, often a magnifying glass with a ⊕.
|A cursor indicating zooming out, often a magnifying glass with a ⊖.
Custom cursors edit
A custom cursor may be supplied by using the
url() function and optionally supplying a coordinate for the hotspot if the file does not specify one.
cursor: url('http://example.com/mypointer.cur'), pointer;
cursor: url('http://example.com/mypointer.cur'), url('http://example.com/mypointer.png') 2 2, pointer;
In this example we see that there is a second value, this is a fallback value that some browsers require before they will accept the custom cursor. You can use a PNG, GIF, SVG or .cur file for your cursor, .ani files only work in Internet Explorer.
Here is a .gif example:
<div style="cursor: url('http://upload.wikimedia.org/wikipedia/commons/d/d9/Cursor_forgetful.gif') 17 7, pointer; border: 1px solid;">
GIF cursor test.
Notes & References edit
-webkit-for WebKit based browsers like Safari or Shiira,
-moz-for Gecko based browsers like Firefox or Flock,
-o-for Presto based browsers like Opera and
-ms-for Internet Explorer.