---
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 &lt;a&gt; 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>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Exemples">Exemples</h2>

<h3 id="Exemple_bàsic">Exemple bàsic</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;a href="#"&gt;Try hovering over this link.&lt;/a&gt;</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 &lt;a&gt;</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>