initial commit

1 files changed, 185 insertions, 0 deletions

diff --git a/files/pt-br/web/css/_colon_hover/index.html b/files/pt-br/web/css/_colon_hover/index.html
new file mode 100644
index 0000000000..9e5dfb2b29
--- /dev/null
+++ b/files/pt-br/web/css/_colon_hover/index.html
@@ -0,0 +1,185 @@
+---
+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="Compatibilidade_dos_navegadores">Compatibilidade dos 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>