Docs executáveis de CSS: Hover CSS

Q: Como fazer um efeito hover no CSS?

Escreva uma regra com :hover depois do seletor: .btn:hover { background: #1d4ed8; }. As declarações valem enquanto o ponteiro está sobre o elemento. Acrescente transition: background 0.2s; à regra normal para animar a mudança.

Q: Qual a diferença entre :hover e :active?

:hover vale enquanto o ponteiro está sobre o elemento. :active vale enquanto ele está sendo pressionado, do botão do mouse descer até soltar. Um botão pressionado normalmente está em hover e active ao mesmo tempo.

Q: Em que ordem ficam as pseudo-classes de link?

:link, :visited, :hover, :active (lembre de LVHA, ou "LoVe HAte"). Elas têm a mesma especificidade, então vence a regra posterior; em qualquer outra ordem um estilo de visited ou de hover pode esconder o de hover ou de active.

Q: Como mudar a cor do link no CSS?

Estilize o elemento a: a { color: #2563eb; }, depois a:visited { color: #7c3aed; } e a:hover { color: #1d4ed8; } para os outros estados. Definir color em a cobre tanto os links não visitados quanto os visitados.

Como o :hover funciona

:hover é uma pseudo-classe que seleciona um elemento enquanto o ponteiro do mouse está sobre ele. Acrescente-a a qualquer seletor e escreva os estilos do estado em hover:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover</title>
  <style>
    .btn {
      background: #2563eb;
      color: white;
      border: 0;
      padding: 10px 18px;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
    }
    .btn:hover {
      background: #1d4ed8;
    }
  </style>
</head>
<body>
  <button class="btn">Hover me</button>
</body>
</html>

Só as declarações da regra :hover mudam; todo o resto vem de .btn. Quando o ponteiro sai, o elemento volta aos estilos normais.

Efeitos de hover suaves com transition

A mudança no hover é instantânea, a menos que você acrescente transition à regra normal (não à regra :hover), para que ela anime na entrada e na saída:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover transition</title>
  <style>
    .card {
      width: 220px;
      padding: 16px;
      border: 2px solid #e5e7eb;
      border-radius: 10px;
      background: white;
      transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    }
    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(17, 24, 39, 0.15);
      border-color: #2563eb;
    }
  </style>
</head>
<body>
  <div class="card">Hover the card: it lifts, gains a shadow and a blue border.</div>
</body>
</html>

transform e opacity são as propriedades mais baratas de animar; elas não empurram os elementos em volta. Animar width, height ou margin faz a página refazer o layout a cada quadro. Durações, atrasos e curvas de easing estão na página de transition no CSS.

Cores de link: :link, :visited, :hover, :active

Os links têm quatro estados clássicos, mais o foco do teclado, e a ordem das regras importa:

Pseudo-classe	Vale quando
`:link`	O link não foi visitado
`:visited`	A URL está no histórico do navegador
`:hover`	O ponteiro está sobre ele
`:active`	Ele está sendo pressionado
`:focus-visible`	Ele tem o foco do teclado

Todas têm a mesma especificidade, então vence a regra posterior quando duas combinam. Um link visitado em hover combina com :visited e com :hover; se :visited vier por último, a cor de hover nunca aparece. A ordem segura é Link, Visited, Hover, Active (LVHA):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link states</title>
  <style>
    a:link    { color: #2563eb; }
    a:visited { color: #7c3aed; }
    a:hover   { color: #16a34a; text-decoration-thickness: 3px; }
    a:active  { color: #f59e0b; }
    a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <p><a href="https://example.com/never-visited-page">Hover, then press and hold this link</a></p>
</body>
</html>

Os navegadores limitam o que :visited pode mudar, para impedir que páginas leiam o seu histórico. Só propriedades ligadas a cor (color, background-color, border-color, outline-color e algumas outras) têm efeito, e scripts sempre enxergam o valor de não visitado.

:active: o estado pressionado

:active seleciona o elemento enquanto ele está sendo pressionado. Um pequeno movimento dá ao botão uma sensação física:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Active</title>
  <style>
    .btn {
      background: #16a34a;
      color: white;
      border: 0;
      padding: 10px 18px;
      border-radius: 6px;
      box-shadow: 0 4px 0 #166534;
      transition: transform 0.05s, box-shadow 0.05s;
    }
    .btn:hover { background: #15803d; }
    .btn:active {
      transform: translateY(4px);
      box-shadow: 0 0 0 #166534;
    }
    .btn:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
  </style>
</head>
<body>
  <button class="btn">Press me</button>
</body>
</html>

Hover no pai para estilizar um filho

O estado de hover pertence ao elemento sob o ponteiro e a todos os ancestrais dele. Assim, .card:hover .title estiliza o título sempre que qualquer parte do card está em hover, e a mesma ideia revela elementos escondidos:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover parent</title>
  <style>
    .item {
      display: flex;
      justify-content: space-between;
      border: 1px solid #e5e7eb;
      padding: 10px;
      width: 260px;
    }
    .item .actions { opacity: 0; transition: opacity 0.15s; }
    .item:hover .actions,
    .item:focus-within .actions { opacity: 1; }
    .item:hover { background: #eff6ff; }
    .item:hover .name { color: #2563eb; }
  </style>
</head>
<body>
  <div class="item">
    <span class="name">report.pdf</span>
    <span class="actions"><button>Delete</button></span>
  </div>
</body>
</html>

A linha do :focus-within é importante: sem ela, quem navega pelo teclado até o botão Delete apertaria um botão invisível. Junte a cada revelação por hover uma regra de foco.

Hover em telas de toque

Celulares e tablets não têm um ponteiro que repousa sobre um elemento. A maioria dos navegadores móveis aplica o :hover no primeiro toque e o mantém até você tocar em outro lugar, então um estilo de hover pode parecer preso. Duas regras mantêm isso sob controle:

Nunca deixe o único acesso a um conteúdo atrás de :hover. Um menu que abre no hover também precisa abrir no clique.
Envolva efeitos de hover puramente decorativos em uma media query que verifica se há um dispositivo com hover de verdade:

@media (hover: hover) {
  .card:hover { transform: translateY(-4px); }
}

Erros comuns

Espaço antes dos dois-pontos. .btn :hover significa "um elemento em hover dentro de .btn". Escreva .btn:hover.
transition só na regra :hover. Aí a animação acontece na entrada, mas o estilo volta de uma vez na saída. Coloque-a na regra normal.
Ordem errada dos links. Mantenha :link, :visited, :hover, :active nessa ordem.
Hover sem estilo de foco. Quem usa teclado nunca aciona o :hover; dê também um estilo :focus-visible aos elementos interativos.
Hover em um elemento coberto por outro. Uma camada invisível por cima (muitas vezes um pseudo-elemento absoluto) pode capturar o ponteiro. pointer-events: none nessa camada resolve.

Perguntas frequentes

Como fazer um efeito hover no CSS?

Escreva uma regra com :hover depois do seletor: .btn:hover { background: #1d4ed8; }. As declarações valem enquanto o ponteiro está sobre o elemento. Acrescente transition: background 0.2s; à regra normal para animar a mudança.

Qual a diferença entre :hover e :active?

:hover vale enquanto o ponteiro está sobre o elemento. :active vale enquanto ele está sendo pressionado, do botão do mouse descer até soltar. Um botão pressionado normalmente está em hover e active ao mesmo tempo.

Em que ordem ficam as pseudo-classes de link?

:link, :visited, :hover, :active (lembre de LVHA, ou "LoVe HAte"). Elas têm a mesma especificidade, então vence a regra posterior; em qualquer outra ordem um estilo de visited ou de hover pode esconder o de hover ou de active.

Como mudar a cor do link no CSS?

Estilize o elemento a: a { color: #2563eb; }, depois a:visited { color: #7c3aed; } e a:hover { color: #1d4ed8; } para os outros estados. Definir color em a cobre tanto os links não visitados quanto os visitados.

O hover funciona no celular?

Telas de toque não têm um ponteiro que repousa sobre um elemento. A maioria dos navegadores móveis aplica o :hover no toque e o mantém até você tocar em outro lugar, o que pode deixar um estilo de hover preso. Envolva efeitos só de hover em @media (hover: hover) e nunca esconda conteúdo essencial atrás de um hover.

Conceitos relacionados