Often overlooked we wed developers is the usage of the css cursor property. Hovering over an achor tag will usually switch the cursor to a hand. however what if you are using anb onClick, event with javascript/jQuery? we lose the hand cursor. Just like as we wouild use mouseEnabled = true in As3, we should use cursor:pointer in css.

There are several supported variations – using them correctly will ensure good user experience.

custom css cursors

Browser Support
supported browsers

CSS implementation is as follows:


#some_DOM_Object
{
cursor: auto;
cursor: crosshair;
cursor: default;
cursor: pointer;
cursor: hand;
cursor: wait;
cursor: text;
cursor: help;
cursor: move;
cursor: n-resize;
cursor: ne-resize; 
cursor: nw-resize;
cursor: progress;
cursor: s-resize;
cursor: se-resize;
cursor: sw-resize;
}

Its also possible to set

cursor: inherit;

to inherit cursor style from the parent element

Custom Cursors

If you have downloaded or created a .cur custom cursor file you can use it like this

a:hover {cursor:url(“custom.cur”), pointer}

However be smart when using custom cursors as they often damage user experience more then they enhance. Sparkle trails are definitely a thing of the past.