Cursors in CSS

[Cascading Style Sheets: Contents]
[Previous: Form Elements]
[This Page: Cursors in CSS]
[Next: ]

You can change the mouse cursor in your pages by using the following codes shown below. Run your mouse over the codes and note how the cursor changes.

style="cursor: crosshair" style="cursor: default"
style="cursor: move" style="cursor: e-resize"
style="cursor: ne-resize" style="cursor: nw-resize"
style="cursor: n-resize" style="cursor: se-resize"
style="cursor: sw-resize" style="cursor: s-resize"
style="cursor: w-resize" style="cursor: text"
style="cursor: wait" style="cursor: help"
style="cursor: pointer; cursor: hand" style="cursor:url(customCursor.cur)"

To make this code work, you would enter it in the appropriate HTML element. For instance, in these examples:

<td width="50%" style="cursor: crosshair">[text in the table cell]</td>

The last code example above, style="cursor:url(customCursor.cur)", will only work if you have a ".cur" file. You make this file using a special program.