[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.