cursor: auto | the default cursor |
cursor: crosshair | a gunsight-style cross |
cursor: default | the system's normal arrow pointer |
cursor: pointer | the normal hand pointer that appears when you hover over a link |
cursor: hand | a value that is only supported in IE. Don't use it, use pointer instead |
cursor: wait | the waiting cursor, generally a watch or hourglass (non-animated, sadly) |
cursor: text | the text-selecting 'I-beam' thing |
cursor: help | an arrow with a question-mark |
cursor: move | crosshair with arrows on the ends, useful for drag and drop applications |
|
|
cursor: n-resize | an arrow pointing north |
cursor: ne-resize | an arrow pointing north-east |
cursor: nw-resize | an arrow pointing north-west |
cursor: e-resize | an arrow pointing east |
cursor: w-resize | an arrow pointing west |
cursor: s-resize | an arrow pointing south |
cursor: se-resize | an arrow pointing south-east |
cursor: sw-resize | an arrow pointing south-west |
Custom Cursors
Finally, if all of those cursors aren't enough for you, you can supply your own customcursors by uploading the cursor file and pointing to it from in your CSS, just like you would point to an image. Custom cursors work similarly to fonts in CSS: you supply a list ofcursors you'd like to use. The browser will try to download and use each cursor in order. If one is not available or unusable, it will fall back on the next one and so on until it reaches a generic cursor at the end of the list which is used if none of the others are available. You code it like this:
a.help {cursor: url(questionmark.svg), url(/cursors/questionmark.cur), help; }
This code will instruct the browser to first look for an SVG file called "questionmark.svg". If this doesn't work or the browser doesn't support SVG graphics, it will look for a .cur file, which is a common cursor format. If neither of these files end up being available, it will fall back to the normal help cursor.