A propriedade cursor define a
aparência do cursor ao passar o mouse sobre um elemento.
Sintaxe
cssseletor {
cursor: valor;
}
Observação
A propriedade tem muitos valores. Abaixo,
agrupei esses valores para facilitar a orientação.
A aparência do cursor varia em diferentes navegadores,
portanto não coloquei fotos dos cursores, mas sim
nas tabelas de valores fiz uma coluna especial,
ao passar o mouse sobre a célula da qual, você
poderá ver a aparência do cursor descrito.
Valores
Valor
Descrição
Aparência
default
Aparência padrão em forma de ponteiro de seta.
pointer
Usado para mostrar que o elemento
está ativo e pode ser clicado
(este é o padrão para links).
help
Usado para mostrar que o elemento
está associado a alguma ajuda ou pergunta.
not-allowed
Usado para mostrar a invalidez de uma operação.
Texto
Valor
Descrição
Aparência
text
Cursor de texto padrão em forma de barra vertical.
vertical-text
Cursor de texto para texto vertical.
Espera
Valor
Descrição
Aparência
progress
Usado para mostrar que alguma
operação está em andamento e o usuário precisa aguardar.
wait
Usado para mostrar que o usuário
precisa aguardar.
Cursor ao redimensionar
Ao redimensionar um elemento, o valor
da propriedade é formado assim: a palavra resize,
e antes dela, separado por hífen, alguma letra ou
várias letras, por exemplo: n-resize ou ne-resize.
Essas letras são as primeiras letras dos pontos
cardeais: north - norte, south - sul, east - leste,
west - oeste. Neste caso, são usadas as convenções
adotadas para mapas geográficos:
no topo o norte, na base o sul, à esquerda o oeste, à direita
o leste. Claro que isso confunde, mas teremos que
usar como foi inventado:)
Então, aqui estão os valores:
Valor
Direção
Ponto Cardeal
Aparência
n-resize
para cima
north (norte)
ne-resize
para a direita e para cima
nord east (nordeste)
e-resize
para a direita
east (leste)
se-resize
para a direita e para baixo
south east (sudeste)
s-resize
para baixo
south (sul)
sw-resize
para a esquerda e para baixo
south west (sudoeste)
w-resize
para a esquerda
west (oeste)
nw-resize
para a esquerda e para cima
nord west (noroeste)
nesw-resize
para a direita e para cima e para a esquerda e para baixo
nord east - south west (nordeste - sudoeste)
nwse-resize
para a esquerda e para cima e para a direita e para baixo
nord west - south east (noroeste - sudeste)
Redimensionamento de dois elementos
Valor
Descrição
Aparência
col-resize
Redimensionamento horizontal.
row-resize
Redimensionamento vertical.
Alteração de zoom
Valor
Descrição
Aparência
zoom-in
Aumento do zoom.
zoom-out
Redução do zoom.
Movimento
Valor
Descrição
Aparência
move
Usado para mostrar que o elemento
pode ser movido, ou no momento do movimento.
all-scroll
Usado para mostrar que o elemento
pode ser rolado com o mouse em todas as direções.