CSS Mouse Cursor (CSS Advanced Topics part 1)

When using Windows, Linux, or a Macintosh you will have undoubtedly seen many different mouse cursor icons. There is the normal mouse cursor icon that looks like a skewed arrow; the "I" looking icon when selecting text, and some sort of animated logo when the computer is thinking (usually an hourglass).

With CSS you can make it so different mouse icons appear when people visit your site. NOTE: You should know that some people find web pages that change mouse cursor icons annoying, so consider that when playing around with this CSS property!

CSS Cursor Icons

In this lesson we will show how to change the mouse cursor icon for a few different HTML elements. 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 cross hair 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 (usually)

CSS Cursor Code

Now let's try these puppies out. Here are a few cursor code examples that should help you customize your site.

CSS Code:

p { cursor: wait }
h4 { cursor: help }
h5 { cursor: crosshair }

Display:

Please Wait While this Web Page Loads

How May I Help You?

Stick Your Hands in the Air!

Mouse over the lines of text and see which icon your cursor changes to! Sometimes you can add a little bit of excitement to a web page with a well-placed cursor icon change. However, if you make the icons confusing, or change them too often, people will probably leave your site with a poor impression of your web design talent!