We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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 dos navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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

Etiquetas do documento e colaboradores

Colaboradores desta página: tfvictorino, brunoeduardo
Última atualização por: tfvictorino,