What happened to my cursor!?
Setting a custom cursor for certain elements has been around for a while (some cursors worked even in IE 5.5). In CSS3 there are a couple of new cursor styles you can use. Most of them are very usefull, others not so much, but may still come in handy in some edge-cases.
Hover over the boxes to see the cursor (watch your cursor, not the fade effect).
- Custom cursor
Examples of CSS2 cursors
Examples of CSS3 cursors
And some CSS3 cursors which are currently only supported by Firefox and Opera
How does it work?
This is the simplest technique yet, you just add
cursor: not-allowed (or some other fancy cursor)
to a css ruleset and you're done! If the mouse cursor is above the matching element(s) it will change
to the selected cursor.
If you want to use a custom cursor you can specify an url, just like you would with background images.
The custom cursor in the examples is defined as:
cursor: url(images/dp-cursor.png), auto;. The
auto alternative is required for Firefox as an alternative.
You might think that "this is cool and all, but what can I use them for?". Here are some use cases:
- Games (set the cursor to none, or use a custom cursor)
- Disabled actions (use not-allowed)
- Drag & drop operations (you could use alias, copy, move)
Show us the source!
Feel free to look around the different source files we used for this example.