CSS cursors. What's the modern and propper way?

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, 开发者_StackOverflow中文版someone needs to write one. That'd make an excellent smashing magazine article!

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.

The propper way is to use cursor rule default values, as 'move' in your case.

If you want a custom cursor you must have a .cur file for IE and a png/gif file for others, so you can write

cursor:url(notie.png),url(ie.cur),move;

Using CSS:

http://www.w3schools.com/css/pr_class_cursor.asp

.myElement { 
    cursor: move;
}

.myCustomCursor {
    cursor: url(myCoolCursor.gif);
}