The cursor can take many forms with some having ingrained meaning, such as the pointer for showing that
something is clickable. Hover over the following boxes to see how they look. I used the
pseudo class
of
:hover
to make the mouse cursor change here.
#cursor-element:hover {
cursor: pointer;
}
cursor: default;
This shows the default cursor and is (obviously) set by default.
cursor: pointer;
This shows the pointer cursor that we associate with being able to click on something. Use this to
highlight that something on your website is click-able.
cursor: text;
Shows the text-selector icon known as the I-beam.
Use this for text areas, especially those that the user can edit.
cursor: move;
A 4 arrow icon that we associate with being able to move an object. Use this for items in a click and
drop interface or for moving a map.
cursor: grab;
An open hand icon we associate with being able to grab an object. Use this for items in a click and
drop interface or for moving a map.
cursor: grabbing;
A closed hand icon we associate with being in the process of grabbing something. Use this wherever you
actively use the grab cursor.
cursor: crosshair;
Used in precise tools such as image editors or CAD programs.
cursor: not-allowed;
A rarely used cursor to show that something is, well, not allowed.Use it for things that the user does
not have access to.
cursor: wait;
A spinning circle or hourglass. Use this when submitting a form during the back end validation.
cursor: help;
A question mark cursor. You will have noticed that I use this when hovering over defined items. Also
use this for tool tips.
cursor: progress;
An arrow with a spinner. Use this when submitting a form during the back end validation.
cursor: none;
Hides the cursor completely. Use this for anything that requires immersivity such as a full screen
video or a game.