How to Use Hand, Pointer and other CSS Cursors

How to Use Hand, Pointer and other CSS 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.

How to use the CSS-cursor property

Following is the general syntax of the 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 property for different HTML elements including h1, h2, h3, h4, div, <p>, and a link. The default behavior is changed to the other value of cursor for demonstration purpose.

The h1 is assigned the vertical-text value. The hand (pointer) is used for the <h4> heading and so on, See demo online by clicking the image or link below:

CSS cursors

Experience this example online

As you can see, seven types of cursor value are shown in the above example that is used in different HTML elements. As mentioned, the h1 is using the 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 the progress.

You  may also like to read: CSS hover