Busca

Carregando...

sábado, 10 de maio de 2008

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>
Posts relacionados