12.01.2025

Como Alterar o Cursor para uma Mão ao Passar sobre as Linhas de uma Tabela

Resposta Rápida

Para enfatizar a clicabilidade das linhas da tabela ao mudar o cursor para uma mão ao passar o mouse, utilize a pseudo-classe CSS :hover com a regra cursor: pointer:

tr:hover {
  cursor: pointer;
}

Isso adiciona interatividade a cada linha.

Estilização CSS: Falar a Linguagem do Navegador

Vamos revisar os aspectos chave da estilização do cursor, sua aplicação e sua importância no design de interfaces.

Semântica e Acessibilidade: Comunicação Clara

Utilizar o atributo [role="button"] oferece clareza semântica e acessibilidade para os usuários que usam tecnologias assistivas:

tr[role="button"]:hover {
  cursor: pointer;
}

Estilização Centralizada: Buscando Eficiência

Para alcançar um gerenciamento de estilo mais eficiente, crie uma classe .clickable no seu arquivo style.css:

.clickable:hover {
  cursor: pointer;
}

Isso promove a uniformidade e simplifica a manutenção do estilo do projeto.

Desempenho em vez de Bloat: Mantendo Limpo e Simples

Prefira estilos externos em vez de estilos inline, como style="cursor: pointer;", para melhorar o desempenho e manter um código HTML limpo.

Sinais para Interação Produtiva

Para melhorar o feedback do usuário, adicione efeitos visuais como a alteração do fundo ao passar o mouse, além da mudança do cursor:

tr:hover {
  cursor: pointer;
  background-color: #f2f2f2;
}

Isso promove uma interface mais intuitiva.

Guarda-Roupa do Cursor: Vestindo-se para a Ocasião

O CSS oferece uma variedade de estilos de cursor como crosshair, e-resize, e move, permitindo a adaptação de pistas visuais a elementos interativos específicos.

.draggable:hover {
  cursor: move;
}
.resizable:hover {
  cursor: e-resize;
}

Visualização

Você pode apresentar as linhas da tabela como peças em um jogo móvel, e quando uma peça especial é clicada pelo nosso personagem (🦊), o cursor (🖐️) se transforma em uma mão (✋).

Desafios Potenciais ao Trabalhar com CSS e Suas Soluções

Vamos explorar problemas comuns e como resolvê-los ao lidar com cursores:

Elementos Aninhados Sobrepostos

Se elementos dentro de tr tiverem seus próprios estilos hover que podem sobrepor o estilo do cursor, utilize seletores mais específicos para estabelecer a prioridade necessária:

table.sortable tr:hover {
  cursor: pointer;
}

Sincronizando Funcionalidade CSS e JavaScript

Para garantir a interação com os elementos através do JavaScript, sincronize a operação com o CSS para que scripts e estilos se complementem harmonicamente:

document.querySelector('.sortable').addEventListener('click', function(event){
  // Sua lógica de manipulação de clique vai aqui.
});

Atenção à Compatibilidade entre Navegadores

cursor: pointer; é suportado pela maioria dos navegadores modernos, mas sempre verifique a compatibilidade.

Recursos Úteis

1. Selector :hover CSS - W3Schools - Informações sobre como estilizar elementos ao passar o mouse.
2. pointer-events - CSS: Folhas de Estilo em Cascata | MDN – Detalhes sobre a propriedade pointer-events no CSS.
3. cursor - CSS: Folhas de Estilo em Cascata | MDN — Informações adicionais sobre a propriedade cursor.
4. Tabelas HTML - W3Schools — Noções básicas de tabelas HTML e sua estilização.
5. Top 10 Designs de Tabela CSS — Smashing Magazine — Exemplos inspiradores de designs de tabela em CSS.
6. JavaScript DOM EventListener - W3Schools — Visão geral de como o JavaScript interage com eventos em elementos da web.

Video

Navigation