1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
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 > ul {
display: block;
}
</pre>
<p>para ser aplicada a uma estrutura HTML como a seguinte:</p>
<pre class="brush: html"><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>
</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><a></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>
|
