:hover

Resumo

A pseudo-classe :hover corresponde quando o usuário designa um elemento com um dispositivo apontador, mas não necessariamente o ativa. Este estilo pode ser substituído por qualquer outra pseudo-classe de  link-relacionados, isto é  :link, :visited, e :active, aparecendo em regras subsequentes. Na ordem para estilizar apropriadamente links, você precisa colocar a regra :hover depois das regras :link e :visited mas antes da regra :active, como definido pela ordem LVHA:  :link — :visited — :hover — :active.

A pseudo-class :hover pode ser aplicada a qualquer pseudo-elemento. .

User agents visuais como Firefox, Internet Explorer, Safari, Opera ou Chrome, aplicam o estilo associado quando o cursor(mouse pointer) passa sobre um elemento.

Exemplos

:link:hover { outline: dotted red; }

.foo:hover { background: gold; }

Menu dropdown

Com a pseudo-classe :hover você pode criar algoritmos complexos de cascata. Esta é uma técnica comumente usada, por exemplo, para criar menus dropdown com CSS puro (apenas utilizando CSS, sem usar JavaScript). A essência desta técnica é criação de uma regra como a seguinte:

div.menu-bar ul ul {
  display: none;
}

div.menu-bar li:hover > ul {
  display: block;
}

para ser aplicada a uma estrutura HTML como a seguinte:

<div class="menu-bar">
  <ul>
    <li>
      <a href="example.html">Menu</a>
      <ul>
        <li>
          <a href="example.html">Link</a>
        </li>
        <li>
          <a class="menu-nav" href="example.html">Submenu</a>
          <ul>
            <li>
              <a class="menu-nav" href="example.html">Submenu</a>
              <ul>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
              </ul>
            </li>
            <li><a href="example.html">Link</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Veja nosso exemplo de menu dropdown baseado em CSS para entender melhor.

Galeria com imagens full-size e previews

Você pode usar a pseudo-classe :hover para construir uma galeria de imagem, exibindo imagens full-size apenas quando o mouse passa sobre as imagens. Veja esse exemplo para uma possível dica.

Especificações

Compatibilidade dos navegadores

Nos IE8-11, passar sobre um elemento e depois rolar a tela para cima/baixo sem mover o cursor deixará o elemento no estado :hover até que o cursor seja movido. Veja IE bug 926665.

No IE9 (e possivelmente versões mais antigas), se uma <table>  tem um pai com uma width não-auto e overflow-x: auto;, e a <table> tiver conteúdo suficiente para transbordar horizontalmente seu pai e existirem estilos :hover definidos dentro de elementos da tabela, então passar o mouse sobre esses elementos fará com que a altura da <table> aumente. Aqui está um exemplo do bug ao vivo. Uma solução alternativa para o bug é definir min-heigth: 0%; nos elemento pai da tabela (e a unidade em % deve ser especificada, 0 e 0px não funcionam). Para mais detalhes, veja jQuery ticket #10854.

A partir do Safari Mobile para o iOS 7.1.2, “bater levemente” em um elemento clicável faz com que o elemento entre no estado :hover, e o elemento permanecerá nesse estado até que um elemento diferente entre no estado :hover.

Veja também:

• Chromium bug #370155: Don't make :hover sticky on tap on sites that set a mobile viewport
• Chromium bug #306581: Immediately show hover and active states on touch when page isn't scrollable.