mozilla
Los resultados de tu búsqueda

    :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: percy@mozilla.pe, ccarruitero, teoli
    Última actualización por: teoli,