Mudando o cursor do mouse

Como mudar com CSS as opções por padrão dos cursores ao passar por certas partes da página.

Nosso sistema operacional possui cursores por padrão. Aos cursores nos referimos ao ponteiro do mouse: a típica setinha ou qualquer outro desenho que possa ter.

No Windows podemos encontrar vários cursores que se ativam quando passamos por “certas zonas” de nossa tela. Por exemplo, quando nos posicionamos sobre um link, a típica setinha (denominada default em CSS) muda pela mãozinha (pinter). Como no exemplo anterior, podemos encontrar dezenas de situações onde nosso ponteiro muda de imagem.

Com a ajuda das folhas de estilo podemos forçar ao nosso sistema operacional que não seja regido mais sob as normas convencionais dos ponteiros; conseguindo assim um atraente desenho onde o ponteiro de nosso mouse pode chegar a ser até uma imagem de nossa própria criação.

A seguir, pode-se observar a lista dos cursores disponíveis por padrão no Windows:

  • default (seta)
  • crosshair (cruz)
  • e-resize (seta que aponta à direita)
  • hand (mão)
  • help (sinal de pergunta)
  • move (cruz com setas nas extremidades)
  • n-resize (seta que aponta para cima)
  • ne-resize (seta que aponta ao nordeste)
  • nw-resize (seta que aponta ao noroeste)
  • pointer (mão)
  • s-resize (seta que aponta para baixo)
  • se-resize (seta que aponta para o sudeste)
  • sw-resize (seta que aponta para o sudoeste)
  • text (I-beam)
  • w-resize (seta que aponta à esquerda)
  • wait (relógio de areia)

Assim como todas as propriedades da linguagem CSS, é possível definir o objeto aplicando-o a todo o documento ou somente a uma parte do mesmo.

A todo o documento:

<html>
<title>Mudar o cursor</title>
<head>
<style type=”text/css”>
<!–
body {cursor: pointer}
–>
</style>
</head>
<body>
</body>
</html>

A alguns setores do documento:

<html>
<title>Mudar o cursor</title>
<head>
</head>
<body>
<h4 style=”cursor: default”>default</h4>
<h4 style=”cursor: crosshair”>crosshair</h4>
<h4 style=”cursor: pointer”>pointer</h4>
<h4 style=”cursor: move”>move</h4>
<h4 style=”cursor: nw-resize”>nw-resize</h4>
<h4 style=”cursor: ne-resize”>ne-resize</h4>
<h4 style=”cursor: n-resize”>n-resize</h4>
<h4 style=”cursor: e-resize”>e-resize</h4>
<h4 style=”cursor: help”>help</h4>
<h4 style=”cursor: text”>text</h4>
<h4 style=”cursor: wait”>wait</h4>
</body>
</html>

Também é possível utilizar um cursor personalizado:

<html>
<title>Mudar o cursor</title>
<head>
<style type=”text/css”>
<!–
body {cursor : url(“find.cur”)}
–>
</style>
</head>
<body>
</body>
</html>

Fonte: http://www.criarweb.com/

13 respostas para Mudando o cursor do mouse

  1. lucas disse:

    ow, vlw ai, era isso mesmo que estava prescizando pra por no site.

    vlw mesmo

  2. doca disse:

    ow kara vc sabe se tem como usar um tipo de cursor SOMENTE no mozilla firefox
    ??

  3. CAssiana disse:

    legal legal… vlw..

    eu mudei u meu,, ta bem massa,

  4. Cleiton Alves disse:

    Pq no firefox o cursor não aparece como pointer nos links?

  5. Monike disse:

    Como faço para colocar algum objeto no mause por exemplo uma estrela que segue a seta do mouse ! mais tem que ser passo a passo pq tem algumas pessoas que pulam algumas partes ai nós naum conseguimos colocar objetos!

  6. Monike disse:

    Como faço para colocar algum objeto no mouse por exemplo uma estrela que segue a seta do mouse ! mais tem que ser passo a passo pq tem algumas pessoas que pulam algumas partes ai nós naum conseguimos colocar objetos!

    • Leticia Nardello disse:

      eu tambem tentei fazer isso , fui no yahoo respostas e não consegui porque mandaram ir em um monte de coisa , mas cliquei no iniciar no painel de controle fui no mause desenhado no ponteiro que tava escrito lá em cima cliquei em procurar não achei uma estrela mais achei dragãozinhos uma banana e outras coisas tambem resolvi ficar com a banana porque achei legal ESPERO TER AJUDADO , SE EU TE AJUDEI ME RESPONDA , SE NÃO AJUDEI FALE TAMBEM ,OBRIGADO sou Leticia tenho 9 anos

  7. Renan disse:

    cuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu e cuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu filhas da puta

  8. roseli disse:

    Uma vez coloquei no lugar da seta era JESUS CRISTO andando o tempo todo só parava quando manusiava.aguardo resposta,obrigada.

  9. natasha disse:

    nao conseguir

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: