Alterar a aparência do cursor com CSS

Faça uma pergunta
A propriedade cursor pode alterar a aparência do cursor sobre um elemento de uma página web.

O cliente exibirá, automaticamente, o cursor do seu computador que corresponde ao tipo de cursor que você escolheu.


Exemplos


Exemplo de um estilo em forma de cruz dado ao cursor no "body" da sua página
body{ 
  cursor:crosshair; 
}


Pode-se, evidentemente, dar estilos diferentes para vários elementos da mesma página.

Exemplo de um estilo em forma de cruz sobre o "body" incrementado com uma ampulheta sobre as imagens e com a mão, nos links.

body{ 
  cursor: crosshair; 
} 
img{ 
  cursor: wait; 
} 
a:link{ 
  cursor:  pointer; 
}


Para terminar, você também pode atribuir um cursor personalizado à uma página.

Basta colocar no código CSS o tag desejado, partindo do princípio de que o seu cursor está na pasta atual:

cursor: url('seu_cursor_personalizado.cur'), apontar; 

Existem muitos softwares que podem criar cursores personalizados, sendo que o melhor é partir de cursores originais e mudá-los, sem esquecer de salvá-los antes de qualquer manipulação (no Windows, eles se encontram no C:windowscursors).
Exemplo do software: Znsoft IconMaker
O tamanho dos cursores não deve ultrapassar 32x32 px.

Lista dos atributos possíveis desta propriedade


Veja também:
http://w3css.blogspot.com/2007/09/propriedades-pouco-conhecidas-do-css.html

Aceito por todos os navegadores

  • auto: Aspecto idêntico ao cursor padrão no tag que tem o atributo, não muda nada.
  • default: Cursor padrão do navegador.
  • pointer: Cursor em forma de mão com o dedo reto.
  • text: Cursor de edição de texto.
  • help: Cursor de ajuda.
  • wait: Cursor de espera
  • progress: Cursor de progressão.
  • move: Cursor de deslocamento.
  • crosshair: Cursor em forma de cruz.

Cursores de redimensionamento

  • n-resize: Cursor de redimensionamento de baixo para cima.
  • s-resize: Cursor de redimensionamento de cima para baixo.
  • e-resize: Cursor de redimensionamento da esquerda para a direita.
  • w-resize: Cursor de redimensionamento da direita para a esquerda.
  • ne-resize: Cursor de redimensionamento de baixo à esquerda para cima à direita.
  • nw-resize: Cursor de redimensionamento de baixo à direita para cima à esquerda.
  • se-resize: Cursor de redimensionamento de cima à esquerda para baixo à direita.
  • sw-resize: Cursor de redimensionamento de cima à direita para baixo à esquerda.


Nota: Na verdade, é muito fácil lembrar-se de todas essas propriedades ao mesmo tempo.

n, s, e, w correspondem a norte, sul, leste, oeste, ou seja, pra cima, pra baixo, pra direita, pra esquerda.

Basta indicar a direção para a qual o cursor deve apontar, seguido, obviamente, de "-resize".

Não aceito por todos os navegadores


Firefox e Opera, entre outros, ignoram essas orientações.
  • inherit : Mesmo cursor que o tag parente.
  • not-allowed: Cursor de forma arredondada e cruzada.
  • no-drop: Cursor em forma de mão com o dedo reto e um círculo cruzado.
  • col-resize: Cursor feito de duas linhas verticais com uma seta de cada lado.
  • row-resize: Cursor feito de duas linhas horizontais com uma seta de cada lado.



Jean-François Pillou

Nosso conteúdo é produzido em colaboração com especialistas em tecnologia da informação sob o comando de Jean-François Pillou, fundador do CCM.net e diretor digital do Grupo Figaro. CCM é um site sobre tecnologia líder em nível internacional e está disponível em 11 idiomas.

Mais informações sobre a equipe do CCM

Veja também