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
|
---
title: ':hover'
slug: 'Web/CSS/:hover'
tags:
- CSS
- Layout
- NeedsMobileBrowserCompatibility
- Pseudo-class
- Reference
- Web
translation_of: 'Web/CSS/:hover'
---
<div>{{ CSSRef }}</div>
<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:hover</code></strong> coincideix quan l'usuari interactua amb un element amb un dispositiu apuntador, però no necessàriament ho activa. Generalment s'activa quan l'usuari es desplaça sobre un element amb el cursor (punter de ratolí).</p>
<pre class="brush: css no-line-numbers">/* <span class="short_text" id="result_box" lang="ca"><span>Selecciona qualsevol element <a> quan "es deplaça"</span></span> */
a:hover {
color: orange;
}</pre>
<p>Els estils definits per la pseudo-class <code>:active</code> seran anul·lats per qualsevol pseudo-class subsegüent relacionada amb l'enllaç ({{ cssxref(":link") }}, {{ cssxref(":visited") }} o {{ cssxref(":active") }}) que tinguin almenys la mateixa especificitat. Per donar estil els enllaços adequadament, poseu la regla <code>:hover</code> després de les regles <code>:link</code> i <code>:visited</code> però abans d'una regla <code>:active</code> segons el definit per l'<em>ordre LVHA</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>
<div class="note"><strong>Nota</strong>: La pseudo-class <code>:hover</code> és problemàtica en les pantalles tàctils. Depenent del navegador, la pseudo-class <code>:hover</code> pot ser que mai coincideixi, només coincidir per un moment després de tocar un element o bé continuarà coincidint fins i tot després que l'usuari hagi deixat de tocar i fins que l'usuari toqui un altre element. Els desenvolupadors web han d'assegurar-se que el contingut sigui accessible en dispositius amb capacitats de desplaçaments limitats o inexistents.</div>
<h2 id="Sintaxi">Sintaxi</h2>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<h3 id="Exemple_bàsic">Exemple bàsic</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><a href="#">Try hovering over this link.</a></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">a {
background-color: powderblue;
transition: background-color .5s;
}
a:hover {
background-color: gold;
}</pre>
<h4 id="Resultat">Resultat</h4>
<p>{{EmbedLiveSample("Basic_example")}}</p>
<h3 id="Galeria_d'imatges"><span class="short_text" id="result_box" lang="ca"><span>Galeria d'imatges</span></span></h3>
<p>Podeu utilitzar la pseudo-class <code>:hover</code> per construir una galeria d'imatges amb imatges en grandària real que es mostrin només quan el ratolí es mogui sobre una miniatura. Vegeu <a href="/@api/deki/files/6247/=css-gallery.zip">aquesta demostració</a> per a un possible exemple.</p>
<div class="note"><strong>Nota:</strong> Per a un efecte anàleg, però basat en la pseudo-class <a class="internal" href="/en/CSS/%3Achecked" title="en/CSS/:checked"><code>:checked</code></a> (aplicada a les caixes de ràdio (radioboxes) ocultes), vegeu <a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">aquesta demostració</a> , presa de la pàgina de referència <a class="internal" href="/en-US/docs/Web/CSS/:checked" title="en/CSS/:checked">:checked</a>.</div>
<h2 id="Especificacions">Especificacions</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificació</th>
<th scope="col">Estat</th>
<th scope="col">Comentari</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover') }}</td>
<td>{{ Spec2('HTML WHATWG') }}</td>
<td> </td>
</tr>
<tr>
<td>{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}</td>
<td>{{ Spec2('CSS4 Selectors') }}</td>
<td>Es permet a <code>:hover</code> ser aplicat a qualsevol pseudo-element.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}</td>
<td>{{ Spec2('CSS3 Selectors') }}</td>
<td><span class="short_text" id="result_box" lang="ca"><span>Cap canvi</span> <span>significatiu</span></span> .</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>Definició inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Descripció</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>per elements <a></td>
<td>0.2</td>
<td>{{CompatVersionUnknown}}</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><span class="short_text" id="result_box" lang="ca"><span>per a tots</span> <span>els</span> <span>elements</span></span></td>
<td>0.2</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{ CompatGeckoDesktop(1.0) }}</td>
<td>7.0<sup>[1][2]</sup></td>
<td>7.0</td>
<td>2.0.4 (419)<br>
<span style="font-size: small;">various bugs before</span></td>
</tr>
<tr>
<td><span class="short_text" id="result_box" lang="ca">per pseudo-element</span></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</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>Descripció</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suport bàsic</td>
<td>{{ CompatUnknown() }}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}<sup>[3]</sup></td>
</tr>
</tbody>
</table>
</div>
<p>[1] En IE8-11, en passar per sobre d'un element i després desplaçar-se cap amunt/cap baix sense moure el punter, deixarà l'element en estat <code>:hover</code> fins que es mogui el punter. Veure <a href="https://connect.microsoft.com/IE/feedbackdetail/view/926665">IE bug 926665</a>.</p>
<p>[2] En IE9 (i possiblement abans), si un {{HTMLElement("table")}} té un pare amb un no-<code>auto</code> {{cssxref("width")}} i {{cssxref("overflow-x")}}<code>: auto;</code>, i {{HTMLElement("table")}} té prou contingut per desbordar horitzontalment el seu pare i si hi ha estils {{cssxref(":hover")}} establerts en elements de la taula i, a continuació, passen per sobre d'aquests elements faran que augmenti l'alçada de {{HTMLElement("table")}}. <a href="http://jsbin.com/diwiqe">Aquí hi ha una demostració en viu que activa l'error.</a> Una solució provisional per a l'errada és establir <code>min-height: 0%;</code> en l'element pare de la taula (i la unitat <code>%</code> ha de ser especificada; <code>0</code> i <code>0px</code> no funcionen). Hi va haver un error creat com <a href="http://bugs.jquery.com/ticket/10854">jQuery ticket #10854</a>, però s'ha tancat perquè no es considera un error de jQuery.</p>
<p>[3] A partir de Safari Mobile per a iOS 7.1.2, en tocar un <a href="/en-US/docs/Web/Events/click#Safari_Mobile">element que es pot fer clic</a> fa que l'element entri en l'estat <code>:hover</code>. L'element romandrà a l'estat <code>:hover</code> fins que un element diferent hagi entrat en l'estat <code>:hover</code>.</p>
<h2 id="Vegeu_també">Vegeu també</h2>
<ul>
<li><a href="https://code.google.com/p/chromium/issues/detail?id=370155">Chromium bug #370155: No feu <code>:hover</code> en tocar de cop en llocs que estableixen una finestra de visualització mòbil.</a></li>
<li><a href="https://code.google.com/p/chromium/issues/detail?id=306581">Chromium bug #306581: Mostra inmediatament els estats hover i active al tocar quan la pàgina no es pot desplaçar.</a></li>
</ul>
|
