---
title: ':hover'
slug: 'Web/CSS/:hover'
translation_of: 'Web/CSS/:hover'
---
<p>{{ CSSRef() }}</p>

<h2 id="Resumo">Resumo</h2>

<p>A <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <code>:hover</code> 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 é  {{ cssxref(":link") }}, {{ cssxref(":visited") }}, e {{ cssxref(":active") }}, aparecendo em regras subsequentes. Na ordem para estilizar apropriadamente links, você precisa colocar a regra<code> :hover </code>depois das regras <code>:link</code> e <code>:visited</code> mas antes da regra <code>:active</code>, como definido pela ordem <em>LVHA</em>: <code> :link — :visited — :hover — :active.</code></p>

<p>A pseudo-class <code>:hover</code> pode ser aplicada a qualquer <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elemento.</a> {{experimental_inline}}.</p>

<p>User agents visuais como Firefox, Internet Explorer, Safari, Opera ou Chrome, aplicam o estilo associado quando o cursor(mouse pointer) passa sobre um elemento.</p>

<div class="note"><strong>Nota de uso: </strong>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.</div>

<h2 id="Exemplos">Exemplos</h2>

<pre class="brush: css">:link:hover { outline: dotted red; }

.foo:hover { background: gold; }
</pre>

<h3 id="Menu_dropdown">Menu dropdown</h3>

<p>Com a pseudo-classe<code> :hover </code>você pode criar algoritmos complexos de cascata. Esta é uma técnica comumente usada, por exemplo, para criar <strong>menus dropdown com CSS</strong> puro (apenas utilizando CSS, sem usar <a href="/pt-Br/JavaScript">JavaScript</a>). A essência desta técnica é criação de uma regra como a seguinte:</p>

<pre class="brush: css">div.menu-bar ul ul {
  display: none;
}

div.menu-bar li:hover &gt; ul {
  display: block;
}
</pre>

<p>para ser aplicada a uma estrutura HTML como a seguinte:</p>

<pre class="brush: html">&lt;div class="menu-bar"&gt;
  &lt;ul&gt;
    &lt;li&gt;
      &lt;a href="example.html"&gt;Menu&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;
          &lt;a href="example.html"&gt;Link&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</pre>

<p>Veja nosso <a href="/@api/deki/files/6238/=css_dropdown_menu.html">exemplo de menu dropdown baseado em CSS</a> para entender melhor.</p>

<h3 id="Galeria_com_imagens_full-size_e_previews">Galeria com imagens full-size e previews</h3>

<p>Você pode usar a pseudo-classe <code>:hover</code> para construir uma galeria de imagem, exibindo imagens full-size apenas quando o mouse passa sobre as imagens. Veja <a href="/@api/deki/files/6247/=css-gallery.zip">esse exemplo</a> para uma possível dica.</p>

<div class="note"><strong>Note: </strong>Para efeitos análogos, mas baseado na pseudo-classe <code><a href="/en/CSS/%3Achecked">:checked</a></code> (aplicada para esconder radioboxes), veja <a href="/@api/deki/files/6268/=css-checked-gallery.zip">esse demo</a>, tirado desta página <a href="/en/CSS/%3Achecked">En/CSS/:checked.</a></div>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS4 Selectors', '#hover', ':hover') }}</td>
   <td>{{ Spec2('CSS4 Selectors') }}</td>
   <td>Pode ser aplicado a qualquer pseudo-elemento.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}</td>
   <td>{{ Spec2('CSS3 Selectors') }}</td>
   <td>Sem mudança significativa.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>definição inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Funcionalidade</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>para elementos <code>&lt;a&gt;</code></td>
   <td>0.2</td>
   <td>{{ CompatGeckoDesktop(1.0) }}</td>
   <td>4.0</td>
   <td>4.0</td>
   <td>2.0.4 (419)<br>
    <span style="font-size: small;">various bugs before</span></td>
  </tr>
  <tr>
   <td>para qualquer elemento</td>
   <td>0.2</td>
   <td>{{ CompatGeckoDesktop(1.0) }}</td>
   <td>7.0</td>
   <td>7.0</td>
   <td>2.0.4 (419)<br>
    <span style="font-size: small;">various bugs before</span></td>
  </tr>
  <tr>
   <td>para pseudo-elementos</td>
   <td>{{CompatUnknown}}</td>
   <td>{{ CompatGeckoDesktop(28) }}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Funcionalidade</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<p>Nos IE8-11, passar sobre um elemento e depois rolar a tela para cima/baixo sem mover o cursor deixará o elemento no estado <code>:hover</code> até que o cursor seja movido. Veja <a href="https://connect.microsoft.com/IE/feedbackdetail/view/926665">IE bug 926665</a>.</p>

<p>No IE9 (e possivelmente versões mais antigas), se uma {{HTMLElement("table")}}  tem um pai com uma {{cssxref("width")}} não<code>-auto</code> e {{cssxref("overflow-x")}}<code>: auto</code>;, e a {{HTMLElement("table")}} tiver conteúdo suficiente para transbordar horizontalmente seu pai e existirem estilos {{cssxref(":hover")}} definidos dentro de elementos da tabela, então passar o mouse sobre esses elementos fará com que a altura da {{HTMLElement("table")}} aumente.<a href="http://jsbin.com/diwiqe"> Aqui está um exemplo do bug ao vivo</a>. Uma solução alternativa para o bug é definir <code>min-heigth: 0%;</code> nos elemento pai da tabela (e a unidade em<code> % </code>deve ser especificada, <code>0</code> e <code>0px</code> não funcionam). Para mais detalhes, veja <a href="http://bugs.jquery.com/ticket/10854">jQuery ticket #10854</a>.</p>

<p>A partir do Safari Mobile para o iOS 7.1.2, “bater levemente” em um <a href="/en-US/docs/Web/Events/click#Safari_Mobile">elemento clicável</a> faz com que o elemento entre no estado <code>:hover</code>, e o elemento permanecerá nesse estado até que um elemento diferente entre no estado <code>:hover</code>.</p>

<p>Veja também:</p>

<ul>
 <li><a href="https://code.google.com/p/chromium/issues/detail?id=370155">Chromium bug #370155: Don't make <code>:hover</code> sticky on tap on sites that set a mobile viewport</a></li>
 <li><a href="https://code.google.com/p/chromium/issues/detail?id=306581">Chromium bug #306581: Immediately show hover and active states on touch when page isn't scrollable.</a></li>
</ul>