CSS Cursor Looks

CSS allows you to specify the way in which your mouse cursor icon looks, for HTML elements. For example, you may want to use a help icon in a statement inside a paragraph element. You can use a specific CSS code to bring this about.

There are lots of ways in which you can change the mouse cursor icon. Here is a look into the generic types:

Default – Your usual mouse icon

Help – Question mark icon

Pointer – Hand Icon

Crosshair – Crosshair Icon

Wait – Your usual mouse icon in processing or thinking mode

Text – ‘I’ shaped icon

You can assign the desired mouse cursor icon to various HTML elements. Here is a look at the code you need to use:

p { cursor: wait }

h2 { cursor: help }

In the first example, mouse cursor wait icon is assigned to the paragraph tag. In the second example, mouse cursor help icon is assigned to the heading tag.