Changing the Mouse Pointer

2012-06-08

Changing the Cursor or Pointer

A custom cursor is set by using cascading style sheets (CSS) to change the "cursor:" style property. The easiest way to change the cursor type is to add a style="cursor: crosshair" property within an HTML tag. For example:

<p style="cursor: crosshair;">Place Mouse Here</p>

Which is displayed as the following:

Possible Cursor Options

The following links should change the pointer after being 'moused-over'. These show a number of built-in cursor styles that you can use:

cursor: auto;	cursor: default;
cursor: pointer;	cursor: text;
cursor: crosshair;	cursor: help;
cursor: progress;	cursor: wait;

There are also various arrow directions available:

cursor: nw-resize	cursor: n-resize	cursor: ne-resize
cursor: w-resize	cursor: move	cursor: e-resize
cursor: sw-resize	cursor: s-resize	cursor: se-resize

Some of these cursor styles may not work, depending on the browser.

Many years ago it was common to use cursor: hand, but this setting was not standardized. Using cursor: pointer is a better way to get a hand cursor.

Custom Mouse Pointers

In addition to the built-in cursor options, custom cursors can also be displayed. The following HTML code will display a custom cursor, with a filename of cursor.cur:

<p style="cursor: url('cursor.cur')">Place Mouse Here</p>

The user agent (i.e. browser) must be able to handle the type of cursor. Some possible file types that may work are .cur, .csr and .ani files.