Propriedade Cursor
Última atualização: 2026-09-13
cursor Propriedade Cursor
A propriedade cursor controla o formato do cursor exibido quando o ponteiro do mouse passa sobre um elemento e é uma pista visual importante para a interatividade. Ao escolher diferentes tipos de cursor — como pointer, text ou not-allowed —, você pode indicar aos usuários de relance se um elemento é clicável, arrastável ou desabilitado.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Sim |
| Aplica-se A | all |
| Tipo de Animação | discrete |
| Versão CSS | CSS2 |
| Status | Padrão |
📝 Sintaxe
cursor: [ [ <url> [ <x> <y> ]? ]# , ]* [ auto | default | none | pointer | text | move | not-allowed | grab | grabbing | progress | wait | help | cell | crosshair | zoom-in | zoom-out | <cursor-keyword> ];⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
auto | default | pointer | text | move | wait | help | not-allowed | grab | grabbing | crosshair | Palavra-chave | Um tipo de cursor predefinido |
none | Palavra-chave | Oculta o cursor |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| cursor | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1.2 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： pointer é o valor mais comum e sinaliza que um elemento é clicável. Defini-lo explicitamente em elementos interativos, como botões e links, melhora a usabilidade.
Dica： Uma imagem personalizada pode ser usada como cursor, por exemplo cursor: url(cur.cur), auto. Forneça sempre uma palavra-chave de fallback.
❓ Perguntas Frequentes
QÉ uma boa ideia usar cursor: none para ocultar o cursor do mouse no CSS?
ANa grande maioria dos casos, ocultar o cursor não é recomendado: os usuários perdem a noção de posição e o feedback de operação, e a acessibilidade sofre. Serve apenas para casos especiais, como apresentações em tela cheia, telas de jogos ou áreas já cobertas por um cursor personalizado. Se ocultá-lo, ofereça alternativas via teclado e evite páginas com muito texto.
QQual é a diferença entre os valores de cursor grab e grabbing?
Agrab mostra uma mão aberta e indica que um elemento pode ser arrastado, por isso geralmente é definido na origem do arraste. grabbing mostra um punho fechado, indicando um arraste ativo, e é ativado por JavaScript durante o arraste. Juntos, fornecem feedback de estado imediato para arrastar cards, sliders e outras interações orientadas por ponteiro.
QComo uso uma imagem personalizada como cursor do mouse em folhas de estilo CSS?
AEscreva cursor: url('cursor.png') 20 10, auto; — a url define o caminho da imagem, os dois números são as coordenadas do ponto ativo (onde os cliques são registrados) e o auto final é o cursor de fallback usado se a imagem falhar ao carregar, o qual deve ser mantido. Prefira arquivos .cur, .png ou .svg com no máximo 32x32 para melhor compatibilidade entre plataformas.
QPor que botões e links devem usar cursor: pointer em seus estilos CSS?
ABotões e links nem sempre exibem um cursor de mão por padrão — em alguns navegadores, os botões são renderizados com uma seta. Definir cursor: pointer explicitamente comunica a indicação de clicável e melhora a usabilidade e as taxas de cliques. Mas não exagere no uso: adicionar pointer a textos simples ou elementos não interativos faz os usuários acharem que são clicáveis.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
