:hover

Resumen

La pseudo-clase CSS :hover se presenta cuando el usuario coloca el puntero sobre algún elemento, pero no necesariamente está activo. Este estilo puede ser sobreescrito por cualquier otra pseudo-clase relacionada a link, como puede ser :link, :visited, y :active, apareciendo en las siguientes reglas. Para usar apropiadamente links, necesitas poner la regla :hover después de las reglas de :link y :visited , pero antes de :active , así puede ser definido como LVHA-order: :link:visited:hover:active.

Agentes de usuarios visuales, como Firefox, Internet Explorer, Safari, Opera o Chrome, aplican el estilo asociado cuando el cursor (el puntero del mouse) se coloca sobre un elemento.

Nota: en pantallas touch :hover es problemático o imposible. La pseudo-clase :hover nunca selecciona, o selecciona por un pequeño momento después de tocar el elemento. Como los dispositivos touchscreen son muy comunes, es importante para los desarrolladores web no tener contenido accessible solo cuando se haga hover, de lo contrario el contenido podría estar oculto para usuarios con estos dispositivos.

Ejemplos

:link:hover { outline: dotted red; }

.foo:hover { background: gold; }

Menú desplegable

Con la pseudo-clase :hover puedes crear complejos algoritmos de cascada. Está técnica es usada comunmente, por ejemplo, para crear menús desplegables con CSS puro (solo CSS, sin usar JavaScript). La esencia de esta técnica es la creación de reglas como las siguientes:

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

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

la cual se aplica a una estructura HTML como esta:

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

Acá ver el ejemplo completo de menú desplegable basado en CSS

Galería con imágenes a pantalla completa y vistas previas

Puedes usar la pseudo-clase :hover para construir una galería de imágenes que las muestre a pantalla completa cuando se pase el mouse sobre las vistas previas. Mira esta demo para mayor detalle.

Nota: Para un efecto similar, pero basado en la pseudo-clase :checked (aplicado a radioboxes ocultos), mira esta demo, tomada de la página En/CSS/:checked.

Especificaciones

Especificación Estado Comentario
Selectors Level 4 Working Draft No hay cambios significativos.
Selectors Level 3 Recommendation No hay cambios significativos.
CSS Level 2 (Revision 1) Recommendation Definición inicial.

Compatibilidad con Navegadores

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
para elementos <a> 0.2 1.0 (1.7 or earlier) 4.0 4.0 2.0.4 (419)
varios errores antes
para todos los elementos 0.2 1.0 (1.7 or earlier) 7.0 7.0 2.0.4 (419)
varios errores antes
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

 

Etiquetas y colaboradores del documento

Contributors to this page: teoli, percy@mozilla.pe, ccarruitero
Última actualización por: teoli,