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