Mostrar ocultar div al hacer hover

[IruLaN]

Hola!!!

Bueno, me gustaría saber si se puede hacer con css y como que al pasar por encima de un enlace se muestre un recuadro de texto.

Si entráis a http://www.asleepbook.com me gustaría que al pasar el ratón por encima de cada enlace del menu inferior apareciera un texto en la derecha (actualmente marcada con una div en verde).

No se si puede hacerse solamente con css.

Me podrían ayudar??

Muchas gracias!!!!

[kseso?]

Hey, hey, hey

Otra diseñadora enredando con el código. Eso está bien.
Si, se puede y es fácil, Irulan.

El texto que quieras ocultar lo colocas en un <span>...</span> dentro del enlace:

<a href="esto es un enlace <span>con texto oculto</span>....</a>

y con css lo ocultas:

a span {display: none;}

y lo muestras al pasar por encima con:

a:hover span {display: block; position: absolute; /*y marcas los valores con top:Xpx, left: Xpx;*/}

Más luego, si no te sale, ya le echo un vistazo a tu propio código.
Puedes ver ese efecto (uno con imágenes y otro con texto) en la portada de la actividad de mayo de css

Un saludo

EDITO: Creo que será más didáctico que veas los ejemplos de Mikmoro en su página: En la sección de Rollovers: tooltip y efectos hover

[IruLaN]

Jejeje parece sencillo, pero... yo soy tontita... como calculo el top y el left??? :S (dios me pegaría de cabezazos a mi misma haciendome estas preguntas...)

[IruLaN]

Creo que ya lo he entendido, hace referencia al tamaño de todo el contenido pensé que no.

Muchas gracias me ha servido de gran ayuda!!!!

[kseso?]

Esto me pasa por no ver antes tu página. grrrrrr.
Irulan, la propuesta inicial del span se puede mejorar:
Como no son enlaces disperso (sino un menú), y que ya estás utilizando una lista (que es lo correcto) para el menú, el uso de <span> limita mucho.

Si sólo quieres mostrar un mensaje podrías usar span. Pero creando otra lista (ul/li) dentro de cada li que ahora tienes, tendrás más libertad y posibilidades de mostrar más cosas: enlaces diferentes, imágenes, textos varios...

Si Alonso me deja moral después te hago un pequeño código para que veas esta segunda idea ( y te busco enlaces para que lo veas funcionando)

Un saludo

[IruLaN]

Ei kseso? que atento eres... por ahora me funciona pero si me pones ejemplos aún mejor jejejeje. Así aprendo más :P

Gracias!!!

[kseso?]

nahh, intentando ganarme el cielo y que las visitas de Morfeo no sean demasiado desagradables

Lo que quería decirte en el último mensaje, es que un enlace (<a>) no puede contener en su interior elementos de bloque (div´s, listas ...) y que eso limita su "juego".

La idea de colocar dentro del <li> donde tienes alojado el enlace "home" otra lista:

Código html:

<ul>
     <li>
         <a href="#" tittle="lo que encuentras en el Inicio>Home</a>
         <ul>
               <li>
                      <!-- aquí pondríamos todo ese contenido variado y mostrarlo con hover-->
                </li>
           </ul>
      </li>
       <li>
           <a href="#" tittle="Entretente con mis realizaciones">Portafolio</a>
         <ul>
               <li>
                      <!-- aquí pondríamos todo ese contenido variado y mostrarlo con hover-->
                </li>
           </ul>
 

Fue la base sobre la que está hecha esta página de la actividad de enero de css.
Si te fijas en los enlaces de abajo, los nombres de los participantes, verás que cada uno despliegan una lista (ul) que tiene dos enlaces distintos y el avatar (que a su vez despliega una imagen).

Todo esto es símplemente para que vieses las distintas posibilidades que hay, todo depende de lo que quieras hacer (y aquí vendrán los chicos de la cueva de javascript y similares y te indicarán lo fácil, versátil y vistoso de usar esa otra vía )

Un saludo

[IruLaN]

Gracias kseso?! En cuanto pueda lo pondré en práctica. Has sido muy amable :D