Cursor personalizado no site: por que trocar a seta do mouse atrapalha

A loja de pranchas ganhou um cursor em forma de prancha no site inteiro. No protótipo ficou charmoso. Na primeira semana, o suporte recebe três reclamações de "o botão não funciona": o clique acontecia alguns pixels ao lado da ponta desenhada, e o "x" de fechar o carrinho tem 16 px. A resposta curta: mantenha os cursores do sistema (seta, mão em links, barra de texto em campos) e troque o cursor só numa área específica onde ele comunica uma ação, como a mira de uma ferramenta de recorte. Se trocar, defina o ponto ativo da imagem e sempre deixe um cursor padrão como reserva.

A seta, a mão e a barra de texto são uma linguagem que a pessoa aprendeu em décadas de uso. Trocar isso no site inteiro é como trocar o formato das placas de trânsito de uma rua só.

Por que o cursor desenhado erra o clique

Todo cursor tem um ponto ativo, o pixel exato onde o clique acontece. Na seta do sistema, é a ponta. Numa imagem personalizada, é o que você declarar no CSS; se não declarar, o navegador usa o canto superior esquerdo da imagem. Se a ponta da prancha está no centro do desenho e o ponto ativo ficou no canto, todo clique sai deslocado.

O segundo problema é o significado. O navegador troca a seta pela mão sobre links e pela barra de texto sobre campos editáveis. Esse retorno visual diz "aqui dá para clicar" antes do clique. Um cursor único aplicado no body com a mesma imagem para tudo apaga essa informação.

O terceiro é a configuração da própria pessoa. Sistemas operacionais permitem aumentar o tamanho do ponteiro e mudar a cor dele, recurso usado por quem tem baixa visão. Um cursor desenhado em CSS pode não acompanhar essa configuração, e a pessoa volta a procurar uma seta pequena na tela.

E há a moda de esconder o cursor com cursor: none e desenhar um círculo que segue o mouse em JavaScript. Esse círculo anda com atraso, depende do script carregar e some quando a página trava. É o pior dos casos.

Como usar a propriedade cursor do jeito certo

1. Não declare cursor no body nem em *. O padrão do navegador já faz o certo para links, campos e texto.
2. Use as palavras-chave nativas quando precisar mudar: pointer, text, grab, grabbing, crosshair, not-allowed, zoom-in. Elas respeitam o tema e o tamanho do sistema.
3. Restrinja imagem personalizada a uma área onde ela explica a ação, como uma ferramenta de desenho ou de recorte.
4. Declare o ponto ativo com as coordenadas depois da URL e teste o clique num alvo pequeno.
5. Termine a lista com uma palavra-chave. Ela é obrigatória na sintaxe e é usada se a imagem não carregar.
6. Use imagem pequena. 32 por 32 px é um tamanho seguro; imagens grandes podem ser recusadas ou cortadas pelo navegador.

O exemplo da ferramenta de recorte

A loja tem uma tela interna onde a equipe recorta fotos de produto. Ali, uma mira faz sentido, porque diz "clique e arraste para selecionar". O resto do site volta ao padrão.

/* Nada de cursor global. Só na área de recorte: */
.area-recorte {
  cursor: crosshair;
}

/* Versão com imagem própria: mira.png tem 32x32 px
   e o centro da mira está no pixel (16, 16). */
.area-recorte.mira-da-marca {
  cursor: url("/img/mira.png") 16 16, crosshair;
}

/* Elementos que podem ser arrastados */
.alca-de-ajuste {
  cursor: grab;
}
.alca-de-ajuste:active {
  cursor: grabbing;
}

As duas coordenadas depois da URL são x e y do ponto ativo, contadas a partir do canto superior esquerdo da imagem. Para a prancha da loja, com a ponta desenhada no pixel (3, 2), a regra seria url("/img/prancha.png") 3 2, auto. Sem os números, o clique fica no canto (0, 0), que é justamente o erro das reclamações do suporte.

Mão em tudo também é erro

O inverso acontece muito: cursor: pointer num card inteiro que não é clicável, ou num título que só parece link. A pessoa clica, nada acontece, e o cursor mentiu na outra direção. A mão promete um clique. Só use em elemento que de fato responde a ele, e de preferência num elemento que também funciona pelo teclado, como lembra o post sobre evento de mouse que não cobre o teclado.

Celular e caneta não têm cursor

Em tela de toque não existe ponteiro visível, então qualquer informação que dependa do cursor simplesmente some. Se a mira da ferramenta de recorte é o único aviso de que a área aceita seleção, quem usa tablet não recebe o aviso. Escreva a instrução em texto perto da área ("Arraste para selecionar o recorte").

Se um efeito só faz sentido com mouse, condicione ao tipo de ponteiro com a media query (hover: hover) and (pointer: fine). E lembre que o dedo precisa de alvos maiores do que a seta, assunto do post alvo de toque pequeno demais.

@media (hover: hover) and (pointer: fine) {
  .galeria-zoom img {
    cursor: zoom-in;
  }
}

Como testar se o seu cursor está mentindo

Três testes rápidos resolvem. Primeiro, clique no menor alvo da página, como o "x" de um modal ou uma caixa de seleção, mirando com a ponta visual do cursor. Se precisar compensar, o ponto ativo está errado. Segundo, nas configurações de acessibilidade do sistema, aumente o tamanho do ponteiro e volte ao site: o cursor continua grande nas áreas personalizadas? Terceiro, passe o mouse por links, botões e campos e confira se a forma muda de acordo com o que cada um faz.

Erros comuns

• Cursor personalizado no body: links, campos e texto ficam com a mesma forma e a pessoa perde o sinal do que é clicável.
• Sem coordenadas do ponto ativo: o clique acontece no canto da imagem, não na ponta desenhada, e alvos pequenos parecem quebrados.
• Sem palavra-chave de reserva: a regra fica inválida ou, se a imagem não carregar, o comportamento depende do navegador.
• cursor: none com cursor falso em JavaScript: o ponteiro atrasa, some se o script falhar e ignora o tamanho configurado no sistema.
• cursor: pointer em elemento sem ação: a mão promete um clique que não existe e a pessoa acha que o site travou.
• Informação só no cursor: em toque e caneta a instrução desaparece, porque não há cursor para mostrar.

Checklist

• Nenhuma regra define cursor em body, html ou *.
• Links mostram a mão e campos de texto mostram a barra de texto.
• Cursores com imagem estão restritos a áreas com ação específica.
• Toda regra com url() tem coordenadas do ponto ativo e uma palavra-chave no fim.
• As imagens de cursor têm até 32 por 32 px.
• cursor: pointer aparece só em elementos que respondem ao clique.
• Instruções que dependem do cursor também existem em texto.

Abra o CSS do seu site e procure por "cursor:". Quantas regras você encontra fora de links, campos e áreas de arrastar? Se alguma está no body, comece por ela: tente clicar num link pequeno e veja se acerta de primeira.