Changing the Mouse Cursor Icon

There is a way to change the mouse cursor icon when it hovers over certain areas of a web page. It's done with the CSS cursor property.

Generally, the mouse cursor is an arrow that changes to something else depending on context. An example is when the cursor becomes a vertical bar as it hovers over text. Another example is the common link pointer icon when the cursor is over a link.

It's that last one I specify the most.

Whenever linking without an "A" tag is required, I use CSS for changing the cursor to the common link pointer icon. (That linked article has examples and how‑to.)

Not always, but usually when I make a button composed of one or more divs in lieu of using HTML form input tags, I change the cursor to the link pointer icon. The "How To Get Good Custom Software" button in the masthead at the top of this page is an example.

Occasionally, I also specify the cursor help icon for links that pop up or otherwise link to additional information related to something on the page.

Example code for implementing the CSS declarations for specifying the cursor icon is further below. Both the help icon and the link pointer icon have code examples.

There are more different cursor icons available than I foresee ever using. But that doesn't mean you won't. See CSS Cursor Values for a complete list.

This table lists only some of the available cursor icons, less than half. It is intended to whet your appetite. If I was successful, use the above link to see the rest.

Every browser has its own ideas about the exact construction of each of the cursor icons. But they generally are similar enough from browser to browser to be instantly recognizable.

Example Code

Here is text without using an HTML a tag that can be clicked like a link. The cursor changes to the link pointer icon when hovering over the text. Clicking will spawn a JavaScript alert box.

(clickable text)

Here is the code for the above clickable text.

<span 
  onclick="alert('The clickable text was clicked.')"
  style="
    cursor:pointer;
    color:blue;
    text-decoration:underline;
  ">
(clickable text)
</span>

The cursor:pointer; declaration is what changes the cursor to a link pointer icon when the cursor is above the clickable text.

Here is a bordered div as a clickable box that also launches an alert box.

Here is the code for the above clickable box. You'll see that the code is similar to the clickable text.

<div 
  onclick="alert('The clickable bordered box was clicked.')"
  style="
    cursor:pointer;
    text-align:center;
    border:1px solid black;
    padding:.5em;
    width:8em;
  ">
(clickable box)
</div>

Like the clickable text example, the cursor:pointer; declaration changes the cursor to a link pointer when it hovers over the div with "(clickable box)".

Let's do one more example.

This last example illustrates the cursor icon changing to the help icon when it hovers over the question-mark image. Clicking on the image launches an alert box.

Here is the code for the clickable image.

<img 
  src="https://www.willmaster.com/images/questionQbold25.png"
  onclick="alert('The `help` image was clicked.')"
  style="cursor:help;"
  alt="question-mark demonstration image">

The cursor:help; declaration causes the mouse cursor to display the help icon when it hovers over the image.

With desktop and laptop computers, you can change the mouse cursor icon when it hovers over certain areas of a web page.

Unless they're augmented with an external mouse, phones and tablets don't have a mouse with which to hover. When no mouse is present, the browser ignores the CSS cursor property.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager