A Cursor is the pointer that indicates the current position of the mouse (or other device) on the screen.
This indicator can have its appearance changed a little if you want to bring attention to specific text or to a specific area when the cursor moves over that text or area.
Step by step
In order to change the look of the cursor you can style the text with span tags than contain the cursor parameter:
style="cursor: cursor-style;"
So, for example:
<span style="cursor: help;">Hover over me to see the cursor!</span>
Results in:
Mouse-over me to see the cursor!
Additional styles
Cursor style
Results in
auto default text
Hover over me to see the cursor.
crosshair
Hover over me to see the cursor.
move
Hover over me to see the cursor.
pointer
Hover over me to see the cursor.
progress
Hover over me to see the cursor.
wait
Hover over me to see the cursor.
Re-size arrows
e-resize w-resize
Hover over me to see the east ⇥ cursor. Hover over me to see the west ⇤ cursor.
n-resize s-resize
Hover over me to see the north ↑ cursor. Hover over me to see the south ↓ cursor.
ne-resize sw-resize
Hover over me to see the north-east ↗ corner cursor. Hover over me to see the south-west ↙ corner cursor.
nw-resize se-resize
Hover over me to see the north-west ⇱ corner cursor. Hover over me to see the south-east ⇲ corner cursor.
It is generally best to stick to these standard pointers, although it is possible to add custom cursors. If you do this, be sure to choose carefully and check it is easy for people to see what the custom cursor is pointing to.
Create
