Hover em interfaces: o que é, tipos de efeitos e implementação

O que é hover em design web

Hover (do inglês “to hover”) — uma reação visual de um elemento de interface quando o cursor do mouse está sobre ele. O termo é usado para se referir tanto à pseudoclasse CSS :hover quanto ao estado do elemento ao passar o mouse.

O conceito de hover originou-se nas primeiras interfaces gráficas do Xerox Alto (1973) e foi padronizado na web com a introdução do CSS2 em 1998. Desde então, o hover tornou-se parte integrante da experiência do usuário em desktop.

De acordo com CSS Usage Statistics (2025), 94% dos sites no top 1000 usam a pseudoclasse :hover para pelo menos um elemento. O hover é mais comumente aplicado a botões (89%), links (85%) e cartões (62%).

Diferença entre hover e outros estados

Hover ≠ active. :hover é ativado ao passar o mouse, :active é ativado no momento do clique. :focus é ativado ao receber foco via teclado. Cada estado tem seu propósito. Hover é uma pré-visualização, active é uma confirmação de ação.

A pseudoclasse :hover em CSS

A pseudoclasse :hover em CSS aplica estilos a um elemento quando o usuário passa o cursor do mouse sobre ele. Funciona com qualquer elemento HTML, mas é mais comumente usada com elementos interativos.

/* Basic hover implementation */
.button {
    background: #4A90D9;
    color: white;
    padding: 12px 24px;
    border: none;
    transition: all 0.3s ease;
}

.button:hover {
    background: #357ABD;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74,144,217,0.4);
}

A especificidade do seletor :hover é a mesma de uma classe (0,1,0). Se você precisar sobrescrever o hover para um elemento específico, use um seletor com maior especificidade. A ordem de declaração é importante: se :hover for declarado depois de :focus, o hover pode não funcionar ao receber foco.

Pseudoclasses combinadas

:hover pode ser combinado com outras pseudoclasses para criar lógica complexa. Por exemplo, .card:hover .card__title altera o estilo do título dentro do cartão ao passar o mouse sobre o cartão inteiro. Isso permite criar efeitos com animação aninhada.

Tipos de efeitos hover

Os efeitos hover são categorizados pelo tipo de propriedade que está sendo alterada. Cada tipo é adequado para diferentes cenários e cria uma sensação específica no usuário.

O tipo mais eficaz é uma combinação de efeitos de cor e sombra. O Material Design recomenda usar a mudança de elevação (alteração da altura da sombra) como o tipo principal de feedback hover.

De acordo com Google Material Design (2024), um efeito hover deve ser perceptível mas não perturbador. A duração de animação recomendada é de 200 a 300 milissegundos. Efeitos muito rápidos (menos de 100 ms) podem passar despercebidos, enquanto efeitos muito lentos (mais de 500 ms) irritam o usuário.

Transições CSS para efeitos suaves

A propriedade CSS transition torna os efeitos hover suaves ao animar as mudanças de propriedades ao longo do tempo. Sem transition, o hover é ativado instantaneamente, o que parece brusco e desagradável aos olhos.

/* Different transitions per property */
.card {
    transition:
        box-shadow 0.3s ease-out,
        transform 0.2s ease-out,
        background 0.15s linear;
}

.card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    transform: translateY(-4px);
}

A duração da transition depende do contexto. Para elementos pequenos (ícones, links) — 150–200 ms. Para elementos grandes (cartões, modais) — 250–350 ms. A função de easing ease-out desacelera suavemente a animação no final, criando uma sensação natural.

Prática recomendada — especificar transition para cada propriedade animada individualmente. A propriedade all é conveniente durante o desenvolvimento, mas em produção é melhor definir propriedades específicas para animação para evitar efeitos inesperados.

Hover em dispositivos touch

Em dispositivos touch, o conceito de hover não existe: não há cursor que possa pairar sobre um elemento. Tocar em um elemento ativa imediatamente um clique, ignorando o estado hover. Isso cria problemas se a interface depende exclusivamente do hover.

De acordo com StatCounter (2026), 62% do tráfego web global vem de dispositivos móveis. Ignorar a ausência de hover em telas touch significa perder o controle da UX para a maioria dos usuários.

/* Disable hover on touch devices */
@media (hover: none) and (pointer: coarse) {
    .button:hover {
        background: initial;
        transform: none;
    }
}

A media query hover: none permite detectar que um dispositivo não suporta hover. Nesses dispositivos, os efeitos hover são desativados e a interação é baseada nos estados :active e :focus. Uma solução alternativa é mostrar o conteúdo hover ao tocar (o primeiro toque mostra o hover, o segundo executa a ação), mas esse padrão degrada a UX.

Acessibilidade dos efeitos hover

A acessibilidade do hover é um aspecto crítico que muitas vezes é negligenciado. Usuários que navegam pela interface com o teclado não conseguem ativar :hover. Funções disponíveis apenas através do hover tornam-se inacessíveis para eles.

Regra WCAG 2.2 (Critério de Sucesso 1.4.13 — Conteúdo ao passar o mouse ou ao receber foco): o conteúdo que aparece ao passar o mouse também deve estar disponível ao receber foco. Se o hover mostra informações adicionais (tooltip, menu suspenso), as mesmas informações devem estar disponíveis em :focus.

/* Hover + focus for accessibility */
.tooltip-trigger:hover .tooltip,
.tooltip-trigger:focus .tooltip {
    opacity: 1;
    visibility: visible;
}

/* Disable animation for vestibular disorder */
@media (prefers-reduced-motion: reduce) {
    *:hover {
        transition: none;
    }
}

A media query prefers-reduced-motion — respeite as configurações do sistema do usuário. Se o usuário desativou a animação no sistema, os efeitos hover devem ser aplicados instantaneamente, sem transition. Isso ajuda pessoas com distúrbios vestibulares.

Recomendações adicionais: não use hover para funções críticas, não dependa apenas da cor para transmitir informações ao passar o mouse (adicione um ícone ou texto) e garanta contraste suficiente para os estados hover.