Question

When moving over a dragable element I want the cursor to change to a hand and upon mouse down until mouse up I want to change to a “grabbing” hand. What is the proper, cross browser compatible way to do this?

Googling this only brings up websites from year two thousand, with tutorials on IE6. BLA!

Are there any good MODERN tutorials on this topic out there? If not, someone needs to write one. That’d make an excellent smashing magazine article!

Answer 1

Using the jQuery framework, you could do something like this:

// define a hover event so that when you hover over and out of the dragable element
// the cursor changes accordingly
$('#element').hover(function(){
    $(this).css('cursor','move');
} , function(){
    $(this).css('cursor','default');
});

// this cursor property is only supported in mozilla, but here you can insert
// an image as other posters have specified
// this event changes the cursor when you click the dragable element
$('#element').mousedown(function(){
    $(this).css('cursor','-moz-grabbing');
});

// this event changes the cursor back to the default type after you let go 
// of the dragable element
$('#element').mouseup(function() {
    $(this).css('cursor','default');
});

For a live example, check this out: http://jsfiddle.net/EaEe3/ Let me know if you need more information. I hope this helps.