Curseurs CSS. Quelle est la manière moderne et propper?

Question

Lors d'un déplacement sur un élément déplaçable, je souhaite que le curseur se transforme en une main et, lorsque la souris est enfoncée, je souhaite que la souris se transforme en une main «attrapante». Quelle est la bonne façon de faire cela? Google Googling cela ne fait apparaître que des sites Web à partir de l'an deux mille, avec des tutoriels sur Internet Explorer 6. BLA!

Existe-t-il de bons tutoriels MODERN sur ce sujet? Sinon, quelqu'un doit en écrire un. Cela ferait un excellent article de magazine!

Answer 1

Utilisation du framework jQuery, vous pourriez faire quelque chose comme ça :

// 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'); 
}); 

Pour un exemple en direct, vérifier cela: http://jsfiddle.net/EaEe3/ Faites-moi savoir si vous avez besoin de plus amples informations. J'espère que ça aide.

Answer 2

L'utilisation de CSS:

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

.myElement { 
    cursor: move; 
} 

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

Answer 3

La façon de Propper est d'utiliser cursor valeurs par défaut de règles, comme 'mouvement' dans votre cas.

Si vous voulez un curseur personnalisé, vous devez disposer d'un fichier .cur pour IE et un fichier PNG/GIF pour les autres, afin que vous puissiez écrire

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