[SOLUCIONADO] div desplegable u oculto - para clima

[difilippocarlos]

Hola a todos, posteo esto acá, por que no se si se hace con jquery, css o html.

Lo que yo quiero es en mi pagina tener un icono del clima, que cuando pase el mouse por arriba, o bien haga click. me muestre un div con los datos de la temperatura y la imagen correspondiente.

Ya tengo todo programado, maxima, minima, temperatura actual, imagen y demas...

lo unico que estoy preguntando es como hacer para agregar esa ventanita que se muestre cuando sea necesario sin que me deforme el resto de la web.

Gracias!!!

PD: aqui hay un ejemplo exactamente como yo lo quiero http://www.infobae.com/america
arriba a la derecha esta el icono del clima

[pzin]

Con CSS puedes hacerlo perfectamente, de hecho sería lo ideal.

Tan sólo necesitas posicionar el elemento que quieras mostrar al pasar el ratón por encima de forma absoluta y ese elemento que se ve al principio darle una posición relativa.

Código HTML:

<div id="tiempo">
  Nublado 22º
  <div id="tiempo_ampliado">
    Máxima, mínina, humedad y demás datos.
  </div>
</div>
 

Le pones una posición relativa al contenedor:

Código CSS:

div#tiempo {
  position: relative;
}
 

Luego para que no interfiera en el resto del HTML, lo sacas del flujo natural indicando una posición absoluta, lo ajustas a dónde lo quieres tener, y lo ocultas:

Código CSS:

div#tiempo_ampliado {
  position: absolute;
  top: 100%;
  right: 0;
  display: none;
}
 

Y ya sólo te queda mostrarlo cuando se pase el ratón por encima:

Código CSS:

div#tiempo:hover div#tiempo_ampliado {
  display: block;
}
 

A grosso modo es eso. Luego ya ajustas demás cosas para visualizarlo como necesites.

[difilippocarlos]

muchisimas gracias!!! anduvo a la perfección...