Tutorio.com

Changing Cursors

Changing the mouse cursor is one of the cool things that css makes possible. Notice how your mouse cursor changes when you move it over CSS. CSS Cursor attribute allows you to set

.help {
cursor: help
}

The help cursor is displayed, when the mouse is over an element with the class help
here's a list of all the different types of cursors that you can use.

1. help
2. pointer
3. crosshair
4. n-resize
5. nw-resize
6. w-resize
7. sw-resize
8. s-resize
9. se-resize
10. text
11. wait
12. default
13. e-resize
14. ne-resize
15. auto

You can even use your own custom images as cursors.

p
{
cursor : url("custom.cur"), pointer

}

Note: The custom images as cursors is only supported in Internet Explorer 6.0, which is why we also included pointer, so if the browser dosent support custom cursors atleast the default pointer will be displayed.

Before you get carried away keep in mind that it is easy to use custom cursors to reduce usability rather than of increasing it. Keep in mind that most people are used to certain cursors doing certain things for example if you are making a button in css, dont use the text cursor use the hand cursor. When used correctly however custom cursors can greatly the increase usability of a site.