:hover
developer.mozilla.orgLa 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
Compatibilidad con navegadores
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHubDesktopMobileChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
:hover
Chrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 1IE Soporte completo 4Opera Soporte completo 4Safari Soporte completo 2WebView Android Soporte completo 37Chrome Android Soporte completo 18Firefox Android Soporte completo 4Opera Android Soporte completo 10.1Safari iOS Soporte completo 1
Notas
Soporte completo 1
Notas
Notas 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.Samsung Internet Android Soporte completo 1.0
<a>
element support No estándar
Chrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 1IE Soporte completo 4Opera Soporte completo 4Safari Soporte completo 2WebView Android Soporte completo 37Chrome Android Soporte completo 18Firefox Android Soporte completo 4Opera Android Soporte completo 10.1Safari iOS Soporte completo 1Samsung Internet Android Soporte completo 1.0All elements support No estándar
Chrome Soporte completo 1Edge Soporte completo 12
Notas
Soporte completo 12
Notas
Notas 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.Firefox Soporte completo 1IE Soporte completo 7
Notas
Soporte completo 7
Notas
Notas 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.Notas In Internet Explorer 9 (and possibly earlier), if a
<table>
has a parent with a non-
auto
: 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.Opera Soporte completo 7Safari Soporte completo 2WebView Android Soporte completo 37Chrome Android Soporte completo 18Firefox Android Soporte completo 4Opera Android Soporte completo 10.1Safari iOS Soporte completo 1Samsung Internet Android Soporte completo 1.0Pseudo-element supportChrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 28IE Soporte completo 11Opera Soporte completo 15Safari Soporte completo 2WebView Android Soporte completo ≤37Chrome Android Soporte completo 18Firefox Android Soporte completo 28Opera Android Soporte completo 14Safari iOS Soporte completo 1Samsung Internet Android Soporte completo 1.0
Leyenda
Soporte completo Soporte completoNo estandar . Esperar poco soporte entre navegadores.
No estandar . Esperar poco soporte entre navegadores.Ver notas de implementación.Ver notas de implementación.
Ver también
Source developer.mozilla.org