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

La pseudo-class CSS :hover 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í).

/* Selecciona qualsevol element <a> quan "es deplaça" */
a:hover {
  color: orange;
}

Els estils definits per la pseudo-class :active seran anul·lats per qualsevol pseudo-class subsegüent relacionada amb l'enllaç (:link, :visited o :active) que tinguin almenys la mateixa especificitat. Per donar estil els enllaços adequadament, poseu la regla :hover després de les regles :link i :visited però abans d'una regla :active segons el definit per l'ordre LVHA: :link:visited:hover:active.

Nota: La pseudo-class :hover és problemàtica en les pantalles tàctils. Depenent del navegador, la pseudo-class :hover 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.

Sintaxi

:hover

Exemples

Exemple bàsic

HTML

<a href="#">Try hovering over this link.</a>

CSS

a {
  background-color: powderblue;
  transition: background-color .5s;
}

a:hover {
  background-color: gold;
}

Resultat

Galeria d'imatges

Podeu utilitzar la pseudo-class :hover 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 aquesta demostració per a un possible exemple.

Nota: Per a un efecte anàleg, però basat en la pseudo-class :checked (aplicada a les caixes de ràdio (radioboxes) ocultes), vegeu aquesta demostració , presa de la pàgina de referència :checked.

Especificacions

Especificació Estat Comentari
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 permet a :hover ser aplicat 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.

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Descripció Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
per elements <a> 0.2 (Yes) 1.0 (1.7 or earlier) 4.0 4.0 2.0.4 (419)
various bugs before
per a tots els elements 0.2 (Yes) 1.0 (1.7 or earlier) 7.0[1][2] 7.0 2.0.4 (419)
various bugs before
per pseudo-element ? (Yes) 28 (28) ? ? ?
Descripció Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic ? (Yes) ? ? ? ?[3]

[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 :hover fins que es mogui el punter. Veure IE bug 926665.

[2] En IE9 (i possiblement abans), si un <table> té un pare amb un no-auto width i overflow-x: auto;, i <table> té prou contingut per desbordar horitzontalment el seu pare i si hi ha estils :hover establerts en elements de la taula i, a continuació, passen per sobre d'aquests elements faran que augmenti l'alçada de <table>. Aquí hi ha una demostració en viu que activa l'error. Una solució provisional per a l'errada és establir min-height: 0%; en l'element pare de la taula (i la unitat % ha de ser especificada; 0 i 0px no funcionen). Hi va haver un error creat com jQuery ticket #10854, però s'ha tancat perquè no es considera un error de jQuery.

[3] A partir de Safari Mobile per a iOS 7.1.2, en tocar un element que es pot fer clic  fa que l'element entri en l'estat :hover. L'element romandrà a l'estat :hover fins que un element diferent hagi entrat en l'estat :hover.

Vegeu també

Document Tags and Contributors

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