:hover

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 2015.

Resumo

Apseudo-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:hoverdepois das regras:link e:visited mas antes da regra:active, como definido pela ordemLVHA::link — :visited — :hover — :active.

A pseudo-class:hover pode ser aplicada a qualquerpseudo-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.

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

css

:link:hover {  outline: dotted red;}.foo:hover {  background: gold;}

Menu dropdown

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

css

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:

html

<div>  <ul>    <li>      <a href="example.html">Menu</a>      <ul>        <li>          <a href="example.html">Link</a>        </li>        <li>          <a href="example.html">Submenu</a>          <ul>            <li>              <a 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 nossoexemplo 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. Vejaesse exemplo para uma possível dica.

Nota:Para efeitos análogos, mas baseado na pseudo-classe:checked (aplicada para esconder radioboxes), vejaesse demo, tirado desta páginaEn/CSS/:checked.