:hover

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

css
/* 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

Error: could not find syntax for this item

Ejemplos

Ejemplo básico

HTML

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

CSS

css
a {
  background-color: powderblue;
  transition: background-color 0.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

Specification
HTML
# selector-hover
Selectors Level 4
# hover-pseudo

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:hover
<a> element support
Non-standard
All elements support
Non-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Non-standard. Check cross-browser support before using.
See implementation notes.

Ver también