CSS cursor – How to use hand, pointer and other cursors

The cursor and CSS

While using browsers or operating systems, we come across different cursors as using the mouse. For example.the hand cursor for links (pointer), ‘I’ style cursor while in a text box etc.

The CSS cursor property lets you specify which type of cursor to show for different elements. For example, specifying different cursor for the main headings and some other for paragraph or Div by using the cursor property.

The example below describes how to show different cursors for different elements of HTML, let us first look at the syntax of cursor CSS property.

CSS cursor Syntax

Following is the general syntax of cursor:

cursor: cursor-value;

Where the cursor value can be a pointer, progress, help, no-drop etc. The example shows different values of CSS cursors.

A cursor hand and other cursors example

This example shows how to use cursor CSS property for different HTML elements including h1, h2, h3, h4, div, <p>, and a link. The default behaviour is changed to the other value of cursor for demonstration purpose.

The h1 uses vertical-text value. The cursor hand (pointer) is used for the <h4> heading and so on, See demo online:

Experience this example online

As you can see, seven types of cursor value are shown in the above example that are used in different HTML elements. As mentioned, the h1 is using vertical-text, h2 using no-drop values.

The <h4> tag is assigned the cursor hand which is basically CSS cursor pointer value. The div is also assigned the pointer cursor. While <p> is using progress.

Also see CSS hover

Was this article helpful?

Related Articles

Leave A Comment?