Cascading Style Sheets/Cursor
Cursor
editCSS 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
editA 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:
<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