3
Obrigado

Algumas palavras de agradecimento nunca são demais.

Alterar a aparência do cursor com CSS

O cursor pode ter sua aparência alterada a depender de qual o elemento de um site sobre o qual ele seja posicionado. Essa exibição é automática assim que o usuário acessa o site. Veja como realizar essa mudança com o CSS.




Exemplos de configuração

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 a 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(tu_cursor_personalizado.cur'), pointer;


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).

Alguns exemplos desses programas são: CursorFX, IconArt e ArtCursors.

Nota: O tamanho dos cursores não deve exceder 32x32 px .

Lista de possíveis atributos desta propriedade

Aceitos 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.

Estilos não aceitos por todos os navegadores

Observação: Firefox e Opera, entre outros, ignoram as orientações listadas abaixo.
  • 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.



Foto: © Unsplash
Veja também
Este documento, intitulado 'Alterar a aparência do cursor com CSS', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.

Assine nossa newsletter!

Receba toda semana o melhor conteúdo

Assine nossa newsletter!