This page was translated from English by the community. Learn more and join the MDN Web Docs community.

: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.

Nota de uso: em telas de toque (touch screens) :hover é impossível ou problemático. Dependendo do navegador a pseudo-classe :hover pode nunca funcionar, ou funcionar apenas por um curto momento depois de “tocar” um elemento, ou podem continuar a funcionar mesmo depois que o usuário pare de “tocar” o elemento até que o usuário toque outro elemento. Como dispositivos touchscreen são comuns, é importante para desenvolvedores web não terem conteúdos acessíveis apenas quando passamos sobre ele, uma vez que esse conteúdo é mais complicado ou impossível de acessar para usuários desses dispositivos.

Exemplos

:link:hover { outline: dotted red; }

.foo:hover { background: gold; }

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.

Note: Para efeitos análogos, mas baseado na pseudo-classe :checked (aplicada para esconder radioboxes), veja esse demo, tirado desta página En/CSS/:checked.

Especificações

Especificação Status Comentário
Selectors Level 4
The definition of ':hover' in that specification.		 Rascunho atual Pode ser aplicado a qualquer pseudo-elemento.
Selectors Level 3
The definition of ':hover' in that specification.		 Recomendação Sem mudança significativa.
CSS Level 2 (Revision 1)
The definition of ':hover' in that specification.		 Recomendação definição inicial.

Compatibilidade com navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar! (en-US)

Funcionalidade Chrome Firefox (Gecko) Internet Explorer Opera Safari
para elementos <a> 0.2 1.0 (1.7 or earlier) 4.0 4.0 2.0.4 (419)
various bugs before
para qualquer elemento 0.2 1.0 (1.7 or earlier) 7.0 7.0 2.0.4 (419)
various bugs before
para pseudo-elementos ? 28 (28) ? ? ?
Funcionalidade Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte básico ? ? ? ? ?

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 (en-US): 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: