Como ocultar y mostrar div en css

stj-snake

Saludos,

Tengo una duda y tras buscar en google no he conseguido resolverla. En resumen, tengo un div que deseo ocultar y cuando se pase el cursor del ratón por encima se muestre. Supongo que esto se podrá hacer en javascript pero no tengo ni idea...

He probado utilizando "display: none" y "display: block" pero no funciona :S. Este es el código del div que deseo ocultar y mostrar:

código

Muchas gracias por adelantado y espero que el tema no este repetido ;)
Un cordial saludo.

willsmith

tienes que usar javascript también para mostrarlo

<a onclick="show('layer')">Mostrar div</a>

<div id="layer" style="display:none;">Contenido oculto</div>

JS:
<script type="text/javascript">
function show(bloq) {
  obj = document.getElementById(bloq);
  obj.style.display = (obj.style.display=='none') ? 'block' : 'none';
}
</script>
Crawler

el tema es que si le haces "display: none" no va a pillar el hover del ratón...

Prueba con display: hidden, aunque no las tengo todas conmigo (y no se si te servirá para lo que quieres)

Edit: me referia a visibility: hidden; y no, tampoco funciona.

Prueba a lanzar la acción de hover desde otro div que no esté en la misma posición (padre-hijo, por ejemplo) entonces si que funcionará.

Ej:

<div id="padre">
<div id="hijo">Bla bla</div>
</div>

#hijo{ visibility: hidden;}

#padre:hover #hijo{ visibility: visible;}

Segundo edit: no funciona en ie6, pero puedes hacerlo funcionar con javascript.

stj-snake

Gracias por tu aporte #2 pero yo necesito que el div este oculto y que al pasar el cursor por encima aparezca no que haya que pulsar en un enlace para que se muestre, aun asi gracias por tu aporte ;). Probaré lo que dice #3 y os comentaré si funcionó.

EDIT: Sigue sin funcionar :/... Sigo buscando por google pero solo encuentro maneras de ocultar y mostrar un div como dice #2 y de esa manera no me sirve :S.

Un cordial saludo :)

-OrioN_

Y cambiando en la respuesta #2 el evento onClick por onMouseOver ?

stj-snake

#5 , no se como abria que definirlo... ya te digo que de javascript no entiendo nada asi que si podrias ser tan amable de explicarme como deberia insertar el evento onmouseover ? . Un cordial saludo

willsmith

Tan facil como cambiar

<a onclick="show('layer')">Mostrar div</a>

por

<a onmouserover="show('layer')">Mostrar div</a> 
stj-snake

Gracias por responder otra vez #7 pero no hay manera de hacerlo sin tener que usar un enlace ?? si no me equivoco (es posible que este equivocado ya que de JS no entiendo jejej) de la manera que tu lo expones has de pasar el cursor por encima de "Mostrar div" para que aparezca el div y yo lo que necesito es que este todo ocultado y que al pasarlo por encima aparezca... Aun asi muchas gracias de nuevo por tu aporte.

Un cordial saludo ;)

B

al principio en el css a la capa le pones:
visibility:hidden;
y cuando le agas el hover a la capa ponle que el visibility te lo ponga en "visible". Lo puedes hacer en javascript facilmente, puedes hacerlo en javascript?
si es asi te dejo el codigo:
en el css de la capa ponle la propiedad visibility:hidden.

spoiler

y en la capa le pones: onmouseover="mostrar()"
y asi deberia funcionarte.
espero qe te sea de ayuda

willsmith

Puedes usar

<div onmouserover="show('layer')"></div> 
<p onmouserover="show('layer')"></p> 

no se que mas ponerte

stj-snake

Muchas gracias #9 y #10 !. Probare lo que me decis y ya os diré si funcionó. Un cordial saludo ;)

Crawler

lo de #3 lo he comprobado, funciona perfectamente y sin javascript (excepto ie6)

Si el problema es que también quieres darle soporte a ie6 te copypasteo lo que necesites, pero vamos, si puedes hacerlo solo por css, para que liarte con js?

Usuarios habituales