W3docs
pt
Entrar

CSS :hover Pseudo-Classe

Aprenda como a pseudo-classe CSS :hover funciona, como combiná-la com transitions e como lidar corretamente com dispositivos touch e acessibilidade.

A pseudo-classe :hover corresponde a um elemento enquanto o ponteiro do utilizador está posicionado sobre ele. Ela é ativada assim que o ponteiro se move para o elemento e desativada no momento em que o ponteiro se afasta — sem necessidade de clique.

Esta página abrange:

  • Sintaxe básica e como selecionar links, botões e qualquer elemento
  • Combinar :hover com transition para efeitos animados suaves
  • Passar o ponteiro sobre um elemento pai para revelar ou reestilizar os seus filhos (padrão de dropdown)
  • Restringir estilos de hover com @media (hover: hover) para segurança em dispositivos touch
  • Requisitos de acessibilidade e o emparelhamento com :focus / :focus-within

Sintaxe

selector:hover {
  /* declarations applied while pointer is over the element */
}

O seletor pode ser qualquer seletor CSS válido — elemento, classe, ID ou uma cadeia de combinadores.

O uso mais comum de :hover é alterar a aparência dos links âncora. Para uma estilização previsível de links, declare as regras na ordem LVHA: :link, :visited, :hover, :active. Essa ordem garante que pseudo-classes posteriores possam substituir as anteriores sem surpresas de especificidade.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:hover {
        background-color: #8ebf42;
        color: #666;
      }
    </style>
  </head>
  <body>
    <h2>:hover selector example</h2>
    <a href="https://www.w3docs.com/">W3docs.com</a>
  </body>
</html>
Experimente Você Mesmo »

Mova o ponteiro sobre o link para ver a cor de fundo e a cor do texto mudarem.

Quando um link aparece dentro de um parágrafo, :hover ainda seleciona apenas esse elemento <a> — o texto circundante não é afetado.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        color: #1c87c9;
      }
      a:hover {
        background-color: #555;
        color: #eee;
      }
    </style>
  </head>
  <body>
    <h2>:hover selector example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and <a href="#">typesetting</a> industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into <a href="#">electronic</a> typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <a href="#">Aldus PageMaker</a> including versions of Lorem Ipsum.</p>
  </body>
</html>
Experimente Você Mesmo »

Hover em elementos de bloco

:hover funciona em qualquer elemento, não apenas em links. Aplicá-lo a uma <div> permite criar efeitos interativos de cartão ou painel.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 30px;
        background-color: #8ebf42;
        color: #eee;
      }
      div:hover {
        background-color: #444;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>:hover selector example</h2>
    <div>
      Lorem ipsum is simply dummy text...
    </div>
  </body>
</html>
Experimente Você Mesmo »

Efeitos de hover suaves com transition

Uma regra :hover simples altera os estilos instantaneamente. Adicionar uma transition no seletor base (não na regra :hover) faz com que o browser anime a mudança em ambas as direções — quando o ponteiro entra e quando sai.

.button {
  background-color: #1c87c9;
  color: #fff;
  padding: 0.5rem 1.2rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  /* Place transition on the base rule, not :hover */
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.button:hover {
  background-color: #145e8a;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

Se você colocar transition apenas dentro da regra :hover, a animação ocorre ao entrar, mas volta instantaneamente ao sair — um erro comum para iniciantes.

Você pode fazer a transição de várias propriedades separando-as com vírgulas, ou usar transition: all 0.25s ease como atalho (embora seja melhor especificar propriedades concretas por questões de desempenho).

Hover no pai para estilizar os filhos

:hover pode fazer parte de um seletor com combinador para reagir ao estado de hover de um pai e estilizar um descendente. Esta é a base dos menus de navegação dropdown e dos efeitos de revelar ao passar o ponteiro.

/* Card image starts dimmed; brightens when the card is hovered */
.card .card-image {
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.card:hover .card-image {
  opacity: 1;
}

/* Reveal an overlay label on hover */
.card .card-label {
  display: none;
}

.card:hover .card-label {
  display: block;
}

Padrão de menu dropdown

.nav-item .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

.nav-item:hover .dropdown {
  display: block;
}
Aviso

Menus acessíveis apenas por hover são inacessíveis para utilizadores de teclado e touch. Emparelhe :hover com :focus-within para que o menu também abra quando um elemento filho recebe foco via navegação por teclado:

.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
  display: block;
}

Restringir estilos de hover para dispositivos touch

Muitos dispositivos com ecrã tátil ativam um hover simulado ao toque, o que pode deixar os estilos "presos" até o utilizador tocar noutro lugar. Para evitar isso, envolva as regras específicas de hover numa media query que verifica se o dispositivo de entrada principal suporta genuinamente hover:

/* Only apply on devices with a real pointer (mouse, trackpad) */
@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }
}

A feature de media hover: hover tem suporte amplo nos browsers modernos. Em dispositivos exclusivamente touch, o bloco é simplesmente ignorado, mantendo os estilos base limpos.

Você também pode combiná-la com pointer: fine para selecionar dispositivos de apontamento precisos (rato/trackpad) excluindo os imprecisos (touch):

@media (hover: hover) and (pointer: fine) {
  .button:hover {
    background-color: #145e8a;
  }
}

Acessibilidade: emparelhar :hover com :focus

Os utilizadores de teclado navegam com a tecla Tab, que aciona :focus em vez de :hover. Se os seus estilos de hover transmitem feedback visual importante (como destacar o item de navegação ativo), aplique os mesmos estilos ao :focus para que os utilizadores de teclado obtenham feedback equivalente:

/* Always pair hover and focus for interactive elements */
a:hover,
a:focus {
  outline: 2px solid #1c87c9;
  outline-offset: 2px;
  text-decoration: underline;
}

Para componentes compostos (como um cartão que contém um botão), :focus-within permite estilizar o pai sempre que qualquer filho tiver foco:

.card:hover,
.card:focus-within {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
Informação

Muitos dispositivos touch não ativam um estado :hover persistente; tocar num elemento normalmente aciona :active ou :focus em vez disso. Teste sempre padrões interativos de hover num dispositivo touch real ou com emulação de touch.

Efeitos de hover em outras propriedades

:hover não se limita a cores. Qualquer propriedade CSS animável pode ser alternada ou transicionada ao passar o ponteiro:

PropriedadeEfeito de hover típico
opacityAparecer/desaparecer overlays ou UI secundária
transformEscalar, transladar ou rodar um elemento
box-shadowAdicionar profundidade a cartões e botões
colorAlterar a cor do texto ou ícone
cursorIndicar que um elemento é interativo

Boas práticas

  • Emparelhe :hover com :focus para que os utilizadores de teclado recebam o mesmo feedback visual: a:hover, a:focus { ... }.
  • Restrinja animações exclusivas de hover com @media (hover: hover) para evitar estados presos em dispositivos touch.
  • Coloque transition na regra base, não dentro de :hover, para que a animação se aplique em ambas as direções.
  • Não oculte conteúdo essencial que só aparece ao passar o ponteiro — é invisível para utilizadores touch e pode ser ignorado por leitores de ecrã.
  • Emparelhe menus de hover com :focus-within para que a navegação por teclado possa abri-los sem rato.
  • Siga a ordem LVHA ao estilizar links: :link, :visited, :hover, :active.

Suporte dos browsers

:hover é suportado em todos os browsers modernos e existe desde o IE 7 para a maioria dos elementos (o IE 6 suportava apenas em tags <a>). A feature query @media (hover: hover) é suportada no Chrome 41+, Firefox 64+, Safari 9+ e Edge 79+.

Prática

Prática
Qual é a finalidade do seletor :hover no CSS?
Qual é a finalidade do seletor :hover no CSS?
Was this page helpful?