Mouse Cursors
With CSS styles you can change the look of the mouse cursor. Custom cursors works in IE and maybe others, not in Firefox anyway.
The following code changes the main cursor on the website:
body {
cursor: crosshair;
}
For a custom cursor:
body {
cursor: url("filename.cur"), auto;
}
You will need a standard cursor after the custom if you want valid css, auto, as i use here, is the same thing as default.
This is an example of the code i have used at the bottom of this page to show the different cursors.
<td onMouseOver="this.style.cursor='n-resize'">n-resize</td>
You can also use some of those codes for the same result:
<td class="cursor">abc</td>
or
<td onMouseOver="this.className='cursor';" onMouseOut="this.className=''">abc</td>
And you should have this in your css too:
.cursor {
cursor:n-resize;
}
With the last examples you can also have a custom cursor, just replace
cursor:n-resize;
with
cursor:url("filename.cur");
Now you should understand how mouse cursors works in css, good luck!
To see how the different cursors look like hold your mouse over the texts below.
| auto | crosshair | default | hand | help | text | wait |
| n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize |
| a custom cursor i have made | ||||||