CSS Advanced Tips – Change Mouse Cursor

CSS can be used to display different mouse cursor icons.

This short article will show how to change the mouse cursor icons. Below is a list of the most commonly accepted cursors:

default – Display the normal mouse cursor icon

wait – The mouse icon to represent the computer “thinking”

crosshair – A crosshair reticle

text – An “I” shaped icon that is displayed when selecting text

pointer – A hand icon that you see when you hover over an HTML link

help – A question mark

Rolling over the text on this page display the described cursor style.

Cursor code

Here is the CSS I used when compiling this site:

h5
{
font-size: 100%;
cursor: help;
}

As you can see any element given the h5 tag will display the mouse icon as a question mark when rolling over it.

This is a h5 heading tag with mouse help icon applied.