Cargando...
Rango
Sexo
Mensajes
Última visita
Miembro desde

Foro Nube » Servicios » Soporte programación

Foro Cerrado
Este foro se encuentra cerrado de forma indefinida. Puedes utilizarlo para revisar material antiguo que desees recuperar.

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

Creado por ,

Mensaje [Página 1 de 1.]

Publicado el Sáb 25 Oct - 20:51

avatar
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!

A 0 usuarios le gusta esto

Publicado el Sáb 25 Oct - 21:05

avatar
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

A 0 usuarios le gusta esto

Publicado el Sáb 25 Oct - 21:11

avatar
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

A 0 usuarios le gusta esto

Publicado el Sáb 25 Oct - 22:50

avatar
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://illiweb.com/fa/pbucket.gif" 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>

A 0 usuarios le gusta esto
Me gustaReputación del mensaje :100% (2 votos)

Publicado el Sáb 25 Oct - 23:34

avatar
Administrador
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á.

A 0 usuarios le gusta esto
Me gustaReputación del mensaje :100% (1 voto)

Firma

Bret
Representante de la comunidad - Coordinador
Equipo de Foro Nube

Publicado el Sáb 25 Oct - 23:41

avatar
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 *-*

A 0 usuarios le gusta esto
Contenido patrocinado

Publicado

A 0 usuarios le gusta esto

Con la tecnología de Foroactivo y punBB