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>

4 comentários:

  1. Olá Helen, tudo bem?

    Esses cursores que tem no Windows eu já tinha uma noção de como colocar no blog, mas eu queria saber se você conhece algum jeito de colocar um efeito ao invés de mudar o ponteiro, assim como há no mouse desse blog aqui:

    PhotoScape Edições

    Eu tentei usar uma imagem, como no exemplo 17 que você citou no post, mas a imagem fica parada, gostaria de saber como fazer o efeito que há no blog que eu citei.

    Espero que eu tenha sido claro.
    Aguardo uma resposta.

    ResponderExcluir
  2. Anônimo,

    O efeito do blog que você citou não é com imagem, mas sim com JavaScript e caracteres. Observe que o que "chove" do cursor são sinais de +.

    Confesso que já tive alguns tutoriais ensinando a fazer isso no extinto site Salada Digital, mas no momento não tenho nenhum código que funcione bem em todos os navegadores mais utilizados:

    * Firefox
    * Internet Explorer
    * Google Chrome

    Vou anotar sua sugestão.

    Obrigada!

    ResponderExcluir
  3. Olá.

    Realmente, olhando com mais atenção agora, eu percebi que são sinais de +, eu achava que eram algum tipo de estrela ou brilho.

    Eu que agradeço sua atenção. Fico no aguardo no post.

    Beijos.

    ResponderExcluir
  4. Oi, boa tarde. Eu quero personalizar o ponteiro do mouse, com uma imagem. Quando o usuário passar o ponteiro no link aparecerá a imagem que quero colocar no ponteiro e não no link. Deste já agradeço! Abraços... [email protected] msn

    ResponderExcluir

Posts relacionados