cursor propriedade, o guarda-roupa pessoal do mouse, determina o tipo de cursor exibido quando o ponteiro do mouse passa sobre um elemento. Ele permite que seus usuários saibam que tipo de ação eles podem realizar, como um sinal de trânsito digital. É um pequeno detalhe, mas que pode melhorar muito a experiência do usuário do seu site!
Sintaxe
A sintaxe do nosso cursor propriedade é moleza.
Por padrão, o cursor assume o auto valor, que permite ao navegador decidir qual cursor exibir com base no contexto.
Esta propriedade camaleônica pode ser aplicada a todos os elementos HTML, exceto (drumroll, por favor)… alguns elementos em . Portanto, todo elemento HTML visual é um playground para a propriedade do cursor.
Embora você queira fazer com que o cursor se mova um pouco pela tela, as animações CSS não podem ser aplicadas à propriedade do cursor. Então, infelizmente, não há cursores dançantes.
O cursor propriedade é herdada por elementos filhos de seus pais.
Exemplo superficial
Use o menu suspenso para mudar o tipo de cursor do mouse exibido ao passar o mouse sobre o div:
Valores de palavras-chave
Vamos fazer um tour pelos vários looks disponíveis no cursor guarda-roupa.
padrão
Este é o “jeans e camiseta do dia a dia” do armário do seu cursor. É o formato padrão do cursor, normalmente uma seta.
Como você viu na demonstração acima, existem muitas palavras-chave que você pode usar para exibir um cursor específico para todos os tipos de situações:
url
Você também pode personalizar cursores com suas imagens usando o url função. Sim, seu cursor também pode exibir uma foto! É como uma sessão de fotos pessoal do seu cursor.
1 |
.element { |
2 |
cursor: url('cursor.png'), auto; |
3 |
}
|
x,y
A propriedade CSS cursor pode opcionalmente utilizar x e y coordenadas para definir um ponto ativo, o ponto exato na imagem do cursor personalizado que será a posição do ponteiro, assim:
1 |
.element { |
2 |
cursor: url('custom.png') 4 12, auto; |
3 |
}
|
Neste código, 4 12 são as x e y coordenadas do hot spot respectivamente dentro da imagem “custom.png”; isso significa que o cursor ponto ativo está a 4 pixels da esquerda e a 12 pixels da parte superior da imagem.
Saber mais
“Gaste tempo entendendo a propriedade do cursor. É um pequeno toque que pode ajudá-lo a controlar um pequeno detalhe, um aspecto frequentemente esquecido do web design que pode realmente melhorar a experiência” – Chris Coyier
Tutoriais relevantes
Aqui estão alguns tutoriais do Tuts+ para ajudá-lo a dominar a propriedade do cursor:
Especificação oficial e suporte ao navegador
Se você estiver com vontade de fazer uma leitura pesada ou quiser explorar a compatibilidade do navegador, aqui está:
Esse é o CSS cursor imóvel para você! Vá lá e deixe o cursor atingir a passarela com estilo.
