CSS and Cursors

Don't like the hand cursor that appears over your links? Want arrows denoting where pages are going to open on your page, or help marks appearing on certain links? Well, you're going to need a few of these pointer codes then, aren't you?

Cursor Types

The typical browser will display the mouse pointer over any blank part of a web page, the gloved hand over any item that is linked (click-able) and the edit cursor over any text or text field.
Within CSS you can change those properties to have a variety of different cursors display on your page. The examples below demonstrates different cursors most browsers will accept.
Hover your mouse pointer over the descriptive text to reveal that cursor.

cursor: auto the default cursor
cursor: crosshair gun-style cross
cursor: default no change
cursor: pointer; cursor: hand the normal link-hand
cursor: wait the hourglass
cursor: text the text-selecting 'I-beam'
cursor: help an arrow with a question-mark
cursor: movecrosshair with arrows on the ends

Change Cursors

To change the cursor when it hovers over links, use the following code:

<style type="text/css"><!--
a:hover {cursor:move}

Change move to whichever cursor you prefer. To change the cursor on a per-link basis, add the code to each link instead. Like this:

<a href="page.html" style="cursor:crosshair">click here</a>

It is also possible to have completely customized cursors. If you've downloaded or made your own original cursor that you'd like to show up on your page, use this code:

<style type="text/css"><!--
a:hover {cursor:url("custom.cur"), pointer}

"custom.cur" is the relative URL of your custom cursor file, uploaded to your server space. "pointer" is the general cursor that will be used if the custom cursor is missing, or if this function isn't supported by a viewer's browser. Here is an example, with a custom cursor I made myself:
hover your pointer over this link


What are CSS ? | Cursor Control | Custom Cursors | CSS - Classes | CSS-Scrollbars