Changing the Mouse Pointer
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:
Place Mouse Here
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.
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
<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.