: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.
Experimental
.
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 com 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
(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: