Tablón con "pestaña" que aparece al poner el ratón encima.

Ver el tema anterior Ver el tema siguiente Ir abajo

Tablón con "pestaña" que aparece al poner el ratón encima.

Mensaje por nympovinne el Sáb 25 Oct - 20:51

Pido perdón por no poner un buen título, pero es que no sé cómo llamarlo. Bueno la cosa es que estoy teniendo muchos problemas con un tablón de pestañas y, realmente, no quiero complicarme la vida... Entonces, mi pregunta y gran duda es...

¿Se puede poner una imagen en la cual, al pasar el cursor por encima, se despliegue y deje ver algo oculto en su interior? Obviamente, al quitar el cursor de la imagen, esta se volvería a cerrar.


Espero haberme explicado bien. ¡Gracias!
avatar
nympovinne

Mensajes : 43
Fecha de inscripción : 25/08/2014

Ver perfil de usuario http://www.isolemnlyswear.net/

Volver arriba Ir abajo

Re: Tablón con "pestaña" que aparece al poner el ratón encima.

Mensaje por Athos el Sáb 25 Oct - 21:05

Pues claro que sí, se puede hacer, básicamente, con un :hover o con Js, si tienes acceso a este. ¿Necesitas que te creemos un código? Aún así, si me explicas qué quieres decir exactamente con "desplegar" (de arriba a bajo, de abajo a arriba, que se despliegue deslizándose, etc) nos facilitarás mucho el trabajo Guiño
Muevo al área de soporte de programación Guiño
avatar
Athos

Mensajes : 16
Fecha de inscripción : 07/09/2014

Ver perfil de usuario

Volver arriba Ir abajo

Re: Tablón con "pestaña" que aparece al poner el ratón encima.

Mensaje por nympovinne el Sáb 25 Oct - 21:11

Se desplegaría hacia abajo, como tienen el tablón en este foro : http://skipping-stone.foros-phpbb.es/ , pinchas en awards y se despliegan hacia abajo Sonrisa
avatar
nympovinne

Mensajes : 43
Fecha de inscripción : 25/08/2014

Ver perfil de usuario http://www.isolemnlyswear.net/

Volver arriba Ir abajo

Re: Tablón con "pestaña" que aparece al poner el ratón encima.

Mensaje por Yuna el Sáb 25 Oct - 22:50

Esto lo he utilizado para un tema de relaciones en uno de mis foros. Le he cambiado colores y alguna otra cosa para que más o menos lo entiendas. La clase "rosa" es la del nombre (osea, donde quieres que al pasar el ratón enseñe el resto". El blanco es donde iría el contenido, la cajita, vamos. Y el morado es donde he colocado la imagen. Tendrías que modificar tamaños y ponerlo a tu gusto.

Código:
<div class="contenido"><div class="rosa">NOMBRE APELLIDO</div><div class="blanco"><div class="morado"><img src="http://i70.photobucket.com/albums/i84/dark_tsukiyomi/tatsuya_zps824bb782.jpg" alt="[image] " title="[image] " border="0"></div></div></div>

<style type="text/css"> .contenido {height: 60px; -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; transition: 1s ease-in-out; overflow: hidden;} .contenido:hover {height: 200px; -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; transition: 1s ease-in-out;} .morado {background-color:#60F; padding: 5px; height: 100px; width: 100px; margin-bottom: 5px;} .rosa {width: 125px; background-color:#F3C; font-size: 13px; font-family: calibri; color: #fff; letter-spacing: 3px; text-align: center; height: 30px; padding-top: 15px; padding-left: 5px; padding-right: 5px;  padding-bottom: 15px;padding-bottom: 15px;} .blanco {background-color: #fff; height: 235px; margin-top: 5px; padding: 10px; width: 110px;} </style>
avatar
Yuna

Mensajes : 48
Fecha de inscripción : 16/08/2014

Ver perfil de usuario http://www.camara-oscura.com

Volver arriba Ir abajo

Re: Tablón con "pestaña" que aparece al poner el ratón encima.

Mensaje por Bret el Sáb 25 Oct - 23:34

Si te interesa tener un código base para hacer desde cero tú tus cosas puedes probar con esto:

CSS
Código:
#miCosa h6 + div {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s;
}
      
#miCosa:hover h6 + div {
    max-height: 9999px;
}

HTML
Código:
<div id="miCosa">
    <h6>Pasa el ratón</h6>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

Lo único que te debería interesar cambiar en el código es el tiempo que tardará el efecto en finalizar (0.5s). El resto debes dejarlo como está, pues es un código base y si quitas cualquiera de las propiedades CSS ya no funcionará.

Firma

Bret
Representante de la comunidad - Coordinador
Equipo de Foro Nube
avatar
Bret
Administrador

Mensajes : 544
Fecha de inscripción : 10/08/2013

Ver perfil de usuario http://www.foronube.net

Volver arriba Ir abajo

Re: Tablón con "pestaña" que aparece al poner el ratón encima.

Mensaje por nympovinne el Sáb 25 Oct - 23:41

Ya lo tengo, mil gracias Yuna! Me has salvado la vida. Puedes ver los créditos debajo del tablón: http://hornofplenty.foroactivo.com/ Riéndose

Gracias Bret, aprenderé a hacerlo para las próximas veces *-*
avatar
nympovinne

Mensajes : 43
Fecha de inscripción : 25/08/2014

Ver perfil de usuario http://www.isolemnlyswear.net/

Volver arriba Ir abajo

Re: Tablón con "pestaña" que aparece al poner el ratón encima.

Mensaje por Contenido patrocinado


Contenido patrocinado


Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba


 
Permisos de este foro:
No puedes responder a temas en este foro.