Verificação HTML: CSS: "cursor": "hand" não é um valor válido para "cursor".

Sobre este problema HTML

A propriedade CSS cursor controla a aparência do ponteiro do rato quando este paira sobre um elemento. O valor hand foi introduzido por versões antigas do Internet Explorer (IE 5.5 e anteriores) como uma extensão proprietária para mostrar um cursor de mão apontadora sobre elementos clicáveis. No entanto, este valor nunca fez parte de qualquer especificação CSS, e nenhum outro navegador o adotou. O equivalente padrão W3C é pointer, que tem sido suportado por todos os navegadores — incluindo Internet Explorer 6 e posteriores — há mais de duas décadas.

Quando o validador W3C encontra cursor: hand, sinaliza-o como um valor inválido porque hand não existe na lista de valores aceites para cursor na especificação CSS. Embora alguns navegadores legados possam ainda interpretá-lo, os navegadores modernos simplesmente ignorarão a declaração inválida, o que significa que os seus elementos clicáveis não exibirão o cursor de mão esperado para muitos utilizadores.

Além da validação, usar valores CSS não padronizados pode causar comportamentos inconsistentes entre navegadores e plataformas. O valor pointer é universalmente suportado e é a forma correta de sinalizar que um elemento é interativo, como um link, botão, ou qualquer região clicável personalizada.

Para corrigir este problema, substitua todas as instâncias de cursor: hand por cursor: pointer nas suas folhas de estilo. Se precisar de suportar versões extremamente antigas do Internet Explorer (IE 5.5 ou anteriores), pode declarar ambos os valores — o navegador usará o que reconhecer — embora isto seja quase nunca necessário hoje em dia.

Exemplos

CSS inválido

O valor hand não é reconhecido pela especificação CSS e irá desencadear um erro de validação:

.clickable {
  cursor: hand;
}

CSS válido

Use o valor padrão pointer em vez disso:

.clickable {
  cursor: pointer;
}

Usando em contexto com HTML

<style>
  .card {
    padding: 16px;
    border: 1px solid #ccc;
    cursor: pointer;
  }
</style>

<div class="card">
  Clique-me para ver detalhes
</div>

Fallback legado (raramente necessário)

Se por algum motivo deve suportar IE 5.5 ou anteriores juntamente com navegadores modernos, pode fornecer ambas as declarações. O navegador aplicará o último valor que compreender:

.clickable {
  cursor: hand;
  cursor: pointer;
}

Note que este padrão de fallback ainda produzirá um aviso de validação para o valor hand. Na prática, não há virtualmente nenhuma razão para suportar navegadores tão antigos, pelo que usar apenas cursor: pointer é a abordagem recomendada.

Valores comuns de `cursor`

Para referência, aqui estão alguns dos valores válidos de cursor mais frequentemente usados definidos na especificação CSS:

auto — o navegador determina o cursor baseado no contexto (comportamento padrão)
default — o cursor padrão da plataforma, tipicamente uma seta
pointer — uma mão apontadora, indicando um link ou elemento clicável
text — um I-beam, indicando texto selecionável
move — indica que algo pode ser movido
not-allowed — indica que uma ação não é permitida
grab / grabbing — indica um elemento arrastável
crosshair — um cursor de seleção precisa
wait — indica que o programa está ocupado
help — indica que ajuda está disponível