Foros del Web » Creando para Internet » CSS »

Mostrar ocultar div al hacer hover

Estas en el tema de Mostrar ocultar div al hacer hover en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/06/2009, 05:52
Avatar de IruLaN  
Fecha de Ingreso: octubre-2005
Ubicación: Sitges, Barcelona.
Mensajes: 413
Antigüedad: 12 años, 1 mes
Puntos: 12
Mostrar ocultar div al hacer hover

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!!!!
  #2 (permalink)  
Antiguo 07/06/2009, 06:07
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Mostrar ocultar div al hacer hover

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:
Cita:
<a href="esto es un enlace <span>con texto oculto</span>....</a>
y con css lo ocultas:
Cita:
a span {display: none;}
y lo muestras al pasar por encima con:
Cita:
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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 07/06/2009 a las 06:40
  #3 (permalink)  
Antiguo 07/06/2009, 06:45
Avatar de IruLaN  
Fecha de Ingreso: octubre-2005
Ubicación: Sitges, Barcelona.
Mensajes: 413
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Mostrar ocultar div al hacer hover

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...)
  #4 (permalink)  
Antiguo 07/06/2009, 06:54
Avatar de IruLaN  
Fecha de Ingreso: octubre-2005
Ubicación: Sitges, Barcelona.
Mensajes: 413
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Mostrar ocultar div al hacer hover

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!!!!
  #5 (permalink)  
Antiguo 07/06/2009, 07:23
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Mostrar ocultar div al hacer hover

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 07/06/2009, 10:52
Avatar de IruLaN  
Fecha de Ingreso: octubre-2005
Ubicación: Sitges, Barcelona.
Mensajes: 413
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Mostrar ocultar div al hacer hover

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

Gracias!!!
  #7 (permalink)  
Antiguo 07/06/2009, 11:40
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Mostrar ocultar div al hacer hover

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:
Ver original
  1. <ul>
  2.      <li>
  3.          <a href="#" tittle="lo que encuentras en el Inicio>Home</a>
  4.          <ul>
  5.                <li>
  6.                       <!-- aquí pondríamos todo ese contenido variado y mostrarlo con hover-->
  7.                 </li>
  8.            </ul>
  9.       </li>
  10.        <li>
  11.            <a href="#" tittle="Entretente con mis realizaciones">Portafolio</a>
  12.          <ul>
  13.                <li>
  14.                       <!-- aquí pondríamos todo ese contenido variado y mostrarlo con hover-->
  15.                 </li>
  16.            </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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 08/06/2009, 02:09
Avatar de IruLaN  
Fecha de Ingreso: octubre-2005
Ubicación: Sitges, Barcelona.
Mensajes: 413
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Mostrar ocultar div al hacer hover

Gracias kseso?! En cuanto pueda lo pondré en práctica. Has sido muy amable :D
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:22.