CSS Advanced Tips - Change Mouse Cursor

May 16, 2020

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.

About Us

We help teams succeed online by creating high-performing, accessible websites and effective programs that connect search to results. We turn complex needs into simple, reliable web solutions. Our work is carefully designed, data-backed, and managed by a single point of contact, ensuring smooth progress from the first visit through follow-up.

Contact Us

Euridica Web Agency
Houston, TX
USA

Phone: (832) 582-1082

Services

web development, web design, digital marketing, SEO, local SEO, data science, automation, AI agents

Connect With Us

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram