Mudando o cursor com CSS

Com CSS você pode definir a aparência do cursor do mouse. Passe o cursor sobre cada parágrafo abaixo para ver o efeito.

1. style="cursor:wait;". Wait faz com que o cursor assuma a aparência de espera, no Windows Padrão é uma ampulheta.
   
   
2. style="cursor:crosshair;". Com crosshair geralmente aparece uma pequena cruz.
   
   
3. style="cursor:pointer;". Com pointer o cursor assume a aparência de quando aponta um link, geralmente é a "mãozinha".
   
   
4. style="cursor:help;". Help geralmente é a setinha com um interrogação, usado para ajuda.
   
   
5. style="cursor:move;". Com move o cursor parece indicar que algo pode ser movido.
   
   
6. style="cursor:default;". Mesmo isto sendo texto, default fez com que aparecesse o cursor padrão, que geralmente é a "setinha".
   
   
7. style="cursor:text;". Isto é um link, mas text fez aparecer o cursor de texto.
   
   
8. style="cursor:e-resize;". O cursor está apontado para o leste.
   
   
9. style="cursor:w-resize;". O cursor está apontado para o oeste.
   
   
10. style="cursor:n-resize;". O cursor está apontado para o norte.
    
    
11. style="cursor:e-resize;". O cursor está apontado para o sul.
    
    
12. style="cursor:ne-resize;". O cursor está apontado para o nordeste.
    
    
13. style="cursor:sw-resize;". O cursor está apontado para o sudoeste.
    
    
14. style="cursor:nw-resize;". O cursor está apontado para o noroeste.
    
    
15. style="cursor:se-resize;". O cursor está apontado para o sudeste.
    
    
16. style="cursor:auto;". Com auto tudo volta ao normal.
    
    
17. style="cursor:'url(cursor.cur)';". Assim você escolhe um cursor arquivado, neste caso é uma aranha.
    
    

Exemplos de códigos:

<span style='cursor:help;'>fonte</span>

<p style='cursor:wait;'>parágrafo</p>

<a style='cursor:move;' href=#>link</a>

<div style='cursor:crosshair;'>corpo da página</div>

Na folha de estilos:

<style>
body {cursor:crosshair;}
a {cursor:help;}
p {cursor:move;}
</style>