Alterar a aparência do cursor com CSS

Dezembro 2016

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.




Tradução feita por Lucia Maurity y Nouira

Veja também :
Este documento, intitulado « Alterar a aparência do cursor com CSS »a partir de CCM (br.ccm.net) está disponibilizado sob a licença Creative Commons. Você pode copiar, modificar cópias desta página, nas condições estipuladas pela licença, como esta nota aparece claramente.