Cursor dan Custom Cursor

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.

Posted in: