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
- Mudar cursor do mouse css
- Mudar ponteiro do mouse css - Melhores respostas
- Cursor personalizado css - Melhores respostas
- O que é mouse - Dicas - Partes do computador
- Cursor do mouse travando ✓ - Fórum Hardware
- Remover sublinhado link css - Dicas -HTML
- Mouse click - Downloads - Personalização
- Posicionar imagem css - Dicas - CSS
Assine nossa newsletter!
