:hover

This translation is incomplete. Please help translate this article from English.

Sumari

La pseudo-classe  CSS :hover coincideix quan l'usuari designa un element amb un dispositiu senyalador, però no necessàriament activat. Aquest estil pot ser anul·lat per qualsevol altre pseudo-classe relacionada amb l'enllaç, aixó és :link, :visited i :active, apareixen en les regles següents. Per tal de donar l'estil adecuat els enllaços, cal posar la regla :hover després de les regles :link i :visited però abans d'un :active, tal com està definit en l'ordre LVHA: :link:visited:hover:active.

La pseudo-classe :hover es pot aplicar a qualsevol pseudo-element.

Els agents d'usuari visuals, com Firefox, Internet Explorer, Safari, Opera o Chrome, aplican l'estil associat quan el cursor (punter) se situa sobre un element.

Nota d'ùs: en les pantalles tàctils :hover és problemàtic o impossible. Depenent del navegador, la pseudo-classe :hover pot no coincidir, o només coincidir un breu moment després de tocar un element, o pot continuar fins i tot després que l'usuari hagi deixat de tocar o toqui un altre element. Com els dispositius de pantalla tàctil són molt comuns, és important per als desenvolupadors web que el contingut no sigui accessible només en passar el ratolí per sobre d'ell, ja que aquest contingut és més complicat o impossible per als usuaris d'aquests dispositius d'accés.

Sintaxi

:hover { style properties }

Exemples

:link:hover { outline: dotted red; }

.foo:hover { background: gold; }

Menú desplegable

Amb la pseudo-classe :hover es poden crear algoritmes complexos en cascada. Aquesta és una tècnica comuna utilitzada, per exemple, amb la finalitat de crear menús desplegables en pur CSS (això és només CSS, sense necessitat d'utilitzar JavaScript). L'essència d'aquesta tècnica és la creació d'una regla com la següent:

div.menu-bar ul ul {
  display: none;
}

div.menu-bar li:hover > ul {
  display: block;
}

per a ser aplicat a una estructura d'HTML com la següent:

<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>

Vegeu sencer exemple de menú desplegable basat en CSS com a possible exemple. 

Galeria amb imatges de grandària completa i vistes prèvies

Es pot utilitzar la pseudo-classe :hover  per tal de crear una galeria d'imatges amb imatges de grandària completa que es mostra només quan el ratolí passa sobre les vistes prèvies. Vegeu aquesta demostració com un possible exemple.

Nota: Per a un efecte anàleg, però basat en la pseudo-classe :checked (aplicat a radioboxes ocults), veure aquesta demostració, presa de la pàgina En/CSS/:checked.

Especificacions

Especificació Estat Comentari
WHATWG HTML Living Standard
The definition of ':hover' in that specification.
Living Standard  
Selectors Level 4
The definition of ':hover' in that specification.
Working Draft Es pot aplicar a qualsevol pseudo-element.
Selectors Level 3
The definition of ':hover' in that specification.
Recommendation Cap canvi significatiu .
CSS Level 2 (Revision 1)
The definition of ':hover' in that specification.
Recommendation Definició inicial.

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
per elements <a> 0.2 1.0 (1.7 or earlier) 4.0 4.0 2.0.4 (419)
various bugs before
per a tots els elements 0.2 1.0 (1.7 or earlier) 7.0 7.0 2.0.4 (419)
various bugs before
per pseudo-element ? 28 (28) ? ? ?
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic ? ? ? ? ?

En IE8-11, situar-se en un element i després desplaçant-se cap amunt/avall sense moure el punter deixarà l'element a l'estat :hover fins que el punter es mogui. Veure IE bug 926665.

En IE9 (i possiblement abans), si un <table> té un pare amb un non-auto width i overflow-x: auto;, i el <table> té prou contingut per desbordar horitzontalment el seu para i hi ha estils :hover definits en els elements dins de la taula, passant per sobre d'aquests elements provoca que l'altura de <table> augmenti. Heus aquí una demostració en viu que provoca l'error. Una solució per a l'error és establir min-height: 0%; en l'element pare de la taula (i la unitat % s'ha d'especificar; 0 i 0px no funciona). Hi va haver un error plantejat com jQuery ticket #10854, però s'ha tancat, en considerar-se que no és un error de jQuery

A partir de Safari Mobile per iOS 7.1.2, en prémer un element clicable fa que l'element entri a l'estat :hover, i l'element romandrà en l'estat :hover fins que un element diferent entri en l'estat :hover.

Veure:

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,