We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

La pseudo-clase :hover de CSS coincide cuando el usuario interactúa con un elemento con un dispositivo señalador, pero no necesariamente lo activa. Generalmente se activa cuando el usuario se desplaza sobre un elemento con el cursor (puntero del mouse).

/* Selecciona cualquier elemento <a> cuando está "mantenido (hovered)" */
a:hover {
  color: orange;
}

Los estilos definidos por la pseudoclase :active serán anulados por cualquier pseudo-clase posterior relacionada con el enlace (:link, :visited, o :active) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla :hover después de las reglas :link y :visited, pero antes de :active, según lo definido por el orden LVHA:link:visited:hover:active.

Nota: La pseudo-clase :hover es problemática en las pantallas táctiles. Dependiendo del navegador, la pseudo-clase :hover podría no coincidir, coincidir solo por un momento después de tocar un elemento, o continuar coincidiendo incluso después de que el usuario haya dejado de tocar y hasta que el usuario toque otro elemento. Los desarrolladores web deben asegurarse de que el contenido sea accesible en dispositivos con capacidades hovering limitadas o inexistentes.

Sintaxis

:hover

Ejemplos

Ejemplo básico

HTML

<a href="#">Intenta pasar el mouse sobre este enlace.</a>

CSS

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

a:hover {
  background-color: gold;
}

Resultado

Galería de imágenes

Puede usar la pseudoclase :hover para crear una galería de imágenes con imágenes de tamaño completo que solo se muestran cuando el mouse se mueve sobre una miniatura. Vea esta demostración para una posible nota.

Nota: Para un efecto análogo, pero basado en la pseudo-clase :checked (aplicado a radioboxes ocultos), vea esta demostración, tomada de la página de referencia :checked.

Especificaciones

Especificación Estado Comentarios
HTML Living Standard
La definición de ':hover' en esta especificación.
Living Standard  
Selectors Level 4
La definición de ':hover' en esta especificación.
Working Draft Permite aplicar :hover a cualquier pseudo-elemento.
Selectors Level 3
La definición de ':hover' en esta especificación.
Recommendation Ningún cambio significativo.
CSS Level 2 (Revision 1)
La definición de ':hover' en esta especificación.
Recommendation Definición Inicial.

Compatibilidad con navegadores

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Soporte básico1 Si1442
<a> element support1 Si1442
All elements support1 Si2173 472
Pseudo-element support ? Si28 ? ? ?
FeatureAndroid webviewChrome para AndroidEdge mobileFirefox para AndroidOpera AndroidiOS SafariSamsung Internet
Soporte básico ? ? Si ? ? Si1 ?
<a> element support ? ? ? ? ? ? ?
All elements support ? ? ? ? ? ? ?
Pseudo-element support ? ? ? ? ? ? ?

1. As of Safari for iOS 7.1.2, tapping a clickable element causes the element to enter the :hover state. The element will remain in the :hover state until a different element has entered the :hover state.

2. In Edge, hovering over an element and then scrolling up or down without moving the pointer will leave the element in the :hover state until the pointer is moved. See bug 5381673.

3. In Internet Explorer 8 to Internet Explorer 11, hovering over an element and then scrolling up or down without moving the pointer will leave the element in the :hover state until the pointer is moved. See bug 926665.

4. In Internet Explorer 9 (and possibly earlier), if a <table> has a parent with a non-auto width, overflow-x: auto;, the <table> has enough content to horizontally overflow its parent, and there are :hover styles set on elements within the table, then hovering over said elements will cause the <table>'s height to increase. See a live demo that triggers the bug. One workaround for the bug is to set min-height: 0%; (the % unit must be specified, since unitless and px don't work) on the <table>'s parent element.

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: lajaso, teoli, percy@mozilla.pe, ccarruitero
Última actualización por: lajaso,