Ver Mensaje Individual
  #4 (permalink)  
Antiguo 11/01/2014, 21:34
Avatar de Alexis88
Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: efecto al pasar el mouse sobre una imagen (hover)

Supongamos que en el documento HTML, tenemos una imagen cualquiera con un id "miImagen" y un Div con un id "miDiv":

Código HTML:
Ver original
  1. <img src = "imagen.jpg" id = "miImagen" />
  2. <div id = "miDiv">CONTENIDO</div>

En la hoja de estilos, ocultamos el Div de id "miDiv" y cuando posemos el cursor del mouse sobre la imagen de id "miImagen", se mostrará el Div de id "miDiv":

Código CSS:
Ver original
  1. #miDiv{
  2.     display: none;
  3. }
  4.  
  5. #miImagen:hover ~ #miDiv{
  6.     display: block;
  7. }

La virgulilla de la Ñ, indica que los estilos a continuación, se aplicarán al elemento indicado a la derecha.

Este ejemplo en ejecución: http://jsbin.com/UWIcIPeD/1

Aplicando más propiedades CSS, puedes darle la apariencia que deseas.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand