Hover States

Hover states são os efeitos visuais aplicados a elementos quando o usuário passa o cursor sobre eles. Botões mudam de cor, links sublinham, cards se elevam, imagens ganham overlay. Bem aplicados, hover states comunicam interatividade, dão feedback imediato e melhoram a sensação de fluidez do site. Mal aplicados, geram problemas de acessibilidade e quebram a experiência em dispositivos touch.

O que são hover states?

Hover state é o estado visual de um elemento quando o cursor está posicionado sobre ele, sem clique. É um dos quatro estados de interação clássicos em UI: default (estado normal), hover (mouse sobre), focus (selecionado por teclado) e active (clicando ou pressionando).

Em CSS, hover states são definidos pela pseudo-classe :hover. Quando o navegador detecta o mouse sobre o elemento, aplica os estilos definidos. Pode ser mudança de cor, sombra, escala, sublinhado, opacidade — qualquer propriedade visual.

O propósito principal é comunicar interatividade. Quando você vê um botão mudar de cor ao passar o mouse, você sabe que aquele elemento é clicável. Sem hover state, o usuário precisa adivinhar — e adivinhação ruim mata conversão.

Hover states fazem parte das microinteracoes que dão personalidade ao site. Junto com loading states, animações de transição e feedback de formulário, formam o conjunto de pequenos detalhes que diferenciam sites profissionais de amadores.

Quando usar hover states

Hover states são úteis em qualquer elemento interativo, mas alguns casos são obrigatórios para boa UX.

Botões e CTAs

Todo botão deve ter hover state. Mudança de cor de fundo, escurecimento, sombra projetada, leve movimento. O hover é o que diferencia um botão de um bloco decorativo. Sem ele, o usuário pode pensar que o site está quebrado.

Links em texto

Links inline em parágrafos devem mudar visualmente no hover. Padrão clássico: cor diferente + sublinhado. Pode ser sublinhado animado (cresce da esquerda para direita), mudança de cor com transição suave, ou ambos. Importante: nunca remover sublinhado de links sem ter outro indicador visual claro.

Cards e imagens

Cards (blocos clicáveis em grid) ganham efeito hover sofisticado: leve elevação (box-shadow maior), escala mínima (transform: scale(1.02)), overlay com texto adicional. Imagens em galerias podem ganhar zoom suave, filtro removido, overlay informativo.

Menus de navegação

Itens de menu mudam visualmente no hover para indicar onde o cursor está. Cor de fundo discreto, mudança de cor do texto, linha colorida abaixo. Em mega menus, hover é o gatilho que abre o painel expandido.

Tipos de efeitos hover comuns

Os efeitos hover mais usados em sites profissionais são poucos mas combinam de várias formas. Mudança de cor de fundo é o mais simples — botão preto vira cinza-escuro, mantendo legibilidade. Funciona em qualquer contexto e é leve para performance.

Mudança de cor de texto é variação para links e ícones. Texto preto vira azul ao passar o mouse, indicando clicabilidade sem alterar layout. Combine com mudança de fundo para hover composto mais expressivo.

Sombra projetada (box-shadow) cria sensação de elevação. Card que parece subir do plano da tela quando o mouse entra. Comum em e-commerce para itens de catálogo. Combine com transform: translateY(-3px) para efeito mais convincente.

Escala (transform: scale) faz o elemento crescer ligeiramente. 1.02 a 1.05 são valores discretos comuns. Maior que isso fica exagerado. Funciona bem em imagens, ícones e cards. Use com transition para suavizar.

Underline animado é técnica moderna onde o sublinhado de link cresce da esquerda para direita ao passar o mouse, em vez de aparecer instantaneamente. CSS puro com background-image gradiente faz o efeito sem JavaScript.

Overlay com texto é útil em galerias de portfólio. Imagem ganha camada semi-transparente com título do projeto centralizado. Usuário vê detalhes sem clicar. Padrão em sites de agência e portfolio.

Hover states e acessibilidade

Hover states sozinhos não são acessíveis. Quem navega por teclado, leitor de tela ou em dispositivo touch não dispara hover. Por isso, hover deve sempre vir acompanhado de outros indicadores.

Focus states (teclado)

Use a pseudo-classe :focus junto com :hover. Quando alguém tabula até um botão, o focus state visualmente o destaca. Por padrão, navegadores mostram outline, mas designers costumam remover por estética. Não remova — substitua por algo melhor: outline customizado, sombra colorida, mudança de fundo.

Indicadores visuais

Não confie só na cor para indicar interatividade. Daltônicos podem não distinguir mudanças sutis de cor. Combine cor com outras pistas: sublinhado, ícone, mudança de tamanho, mudança de cursor (pointer).

Contraste mínimo

Os estados hover e focus precisam ter contraste suficiente em relação ao default e ao plano de fundo. Padrão WCAG 2.1 nível AA: contraste mínimo de 3:1 para componentes de UI. Use ferramentas como WebAIM Contrast Checker para validar. Veja mais em acessibilidade web WCAG.

Hover states no mobile: o problema

Hover não existe em dispositivos touch. Quando o usuário toca a tela, o sistema simula hover momentaneamente antes do clique, mas isso quebra interações que dependem de hover persistente.

Exemplo clássico: dropdown menu que abre no hover. Em desktop funciona perfeitamente. Em mobile, o primeiro toque abre o menu mas também é interpretado como clique no item raiz, levando para outra página antes que o usuário veja as opções.

Solução: detectar dispositivos touch via JavaScript (matchMedia(“(hover: hover)”)) e desabilitar comportamentos dependentes de hover em telas touch. Em mobile, dropdowns abrem com clique, não hover. Hover states puramente decorativos (mudança de cor) não causam problema porque touch não os dispara.

Boas práticas modernas: nunca dependa de hover para mostrar conteúdo essencial. Tudo que aparece no hover deve estar acessível por outros meios. Hover é melhoria, não funcionalidade obrigatória.

Como criar hover states no WordPress

Em Elementor, todos os widgets têm aba Hover na seção Style. Permite definir cor, fundo, sombra e bordas do estado hover sem código. Botões, ícones e imagens têm controles dedicados. Para efeitos avançados (escala, rotação), use a aba Advanced > Motion Effects.

Em Gutenberg com tema FSE, hover states são configurados nas opções de estilo do bloco. Bloco “Button” tem cores hover; bloco “Image” tem opção de hover via Block Settings. Para efeitos custom, adicione CSS no Customizer ou no theme.json.

Para sites com tema custom ou que precisam de hovers avançados, escreva CSS direto. Use a propriedade transition para suavizar mudanças. Exemplo de transição padrão: transition: all 0.2s ease-in-out. Aplica suavidade a qualquer mudança de propriedade.

Performance importa. Animar propriedades como width, height, top e left causa layout reflow caro. Prefira transform e opacity, que rodam na GPU sem reflow. Para hover states no page builder visual, use sempre as opções de Motion Effects nativas em vez de CSS pesado.

Perguntas frequentes

Hover states funcionam no mobile? Não da mesma forma. Dispositivos touch simulam hover momentaneamente no toque, mas hover persistente não existe. Hover decorativo (mudança de cor) é ignorado em mobile. Hover funcional (dropdown, tooltip) precisa ser substituído por interação de clique em mobile.

Hover states afetam performance? Hover states bem feitos (com transform e opacity) são leves, rodam na GPU e não impactam performance. Hover states mal feitos (animando width, height, top, left) podem causar layout shifts e reduzir FPS. Sempre prefira propriedades GPU-friendly.

Como tornar hover states acessíveis? Combine hover com focus states (para usuários de teclado), use mais de um indicador visual (cor + sublinhado, por exemplo), garanta contraste mínimo de 3:1, nunca dependa de hover para mostrar conteúdo essencial. Veja microinteracoes para princípios complementares.

Sites WordPress com efeitos profissionais e acessibilidade: conheça os planos PRO da FULL Services. Entregamos WordPress com Elementor PRO já configurado, tema otimizado para boas práticas de UX e UX em cada componente.