< 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.

cursor: cursor-name;

General purpose cursors
auto 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.
default The default cursor, usually an arrow.
none You should not see the cursor.
Links and status cursors
context-menu 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 Help cursor, often a question mark.
pointer A hand with index finger extended.
progress 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.
wait A watch or timepiece of some kind.
Selection cursors
cell For selecting a cell or cells in a table, spreadsheet. A thick plus with often with a dot in the center.
crosshair A crosshair for precision selecting.
text The I-beam cursor
vertical-text A horizontal I-Beam cursor for vertical text
Drag and drop cursors
alias Cursor indicating an alias, symbolic link or other file/data indirection. Often a curved arrow.
copy Cursor indicating that the dragged item may be copied. Usually an arrow cursor with a +.
move The move cursor, usually a + with arrows on each end.
no-drop
not-allowed Often a circle with a line through it
Resizing and scrolling cursors
e-resize East or right resize.
ew-resize East-West or horizontal resize.
ne-resize North-East or upper right resize.
nesw-resize North-East-South-West or diagonal resize.
nw-resize North-West or upper left resize.
nwse-resize North-West-South-East or diagonal resize.
n-resize North or top resize.
ns-resize North-south or vertical resize.
se-resize South-East or bottom right resize.
sw-resize
s-resize South or bottom resize.
w-resize West or left resize.
col-resize Column resize.
row-resize Row resize.
all-scroll Cursor that indicates scrolling in any direction. Often arrows in the four cardinal directions.
Vendor cursors
-vendor-grab[1] A cursor indicating that it is ready to grab or pick up an item. Often an open hand.
-vendor-grabbing[1] A cursor indicating that it has grabbed or is clasping/carrying an item. Often a fist.
-vendor-zoom-in[1] A cursor indicating zooming in, often a magnifying glass with a ⊕.
-vendor-zoom-out[1] A cursor indicating zooming out, often a magnifying glass with a ⊖.

Custom cursors

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;

or 

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:

Try the snippet, you should see this cursor.
<div style="cursor: url('http://upload.wikimedia.org/wikipedia/commons/d/d9/Cursor_forgetful.gif') 17 7, pointer; border: 1px solid;">
GIF cursor test.
</div>

GIF cursor test

Notes & References

  1. 1 2 3 4 Substitute -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.
This article is issued from Wikibooks. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.