estoy haciendo mi primera pagina y quiero que tenga efectos, lo que quiero hacer es abrir un div con javascript y una animacion de css en la cual este se expande, el tema es que son dos eventos para que esto resulte y quiero que sea en uno solo
lo que tengo hasta el momento abre el div con javascript,(aparece un cuadrado rojo el div) y despues(cuando se pone el mause arriba se expande con un efecto de transicion css) es decir dos eventos, ya que se hace click en el texto, aparece el div, luego que aparece hay que poner el mause arriba y recien se produce el efecto, por tanto lo que intento es hacer todo eso en un click pero no se como!!!
jajaaja ya no se como!
ayuda pleasedejo el codigo
el html aqui
<html>
<head>
<script language="javascript" type="text/javascript" src="llamar.js"></script>
<link rel="stylesheet" href="estilo/formato.css" />
</head>
<body>
<div id="contenedor">
<p> hola </p>
</div>
<p><a style='cursor: pointer;' onclick="muestra_oculta('contenedor');" title="">haz click aqui</a></p>
</body>
</html>
------------------------------- ahora el javascript------------------
function muestra_oculta(id){
if (document.getElementById){ //se obtiene el id
var el = document.getElementById(id); //se define la variable "el" igual a nuestro div
el.style.display = (el.style.display == 'none') ? 'block' : 'none'; //damos un atributo display:none que oculta el div
}
}
window.onload = function(){/*hace que se cargue la función lo que predetermina que div estará oculto hasta llamar a la función nuevamente*/
muestra_oculta('contenedor');/* "contenido_a_mostrar" es el nombre que le dimos al DIV */
}
ahora el css--------------------------------
#contenedor{
width:100px;
height:200px;
background-color:red;
-webkit-transition:width 2s;
-o-transition:width 2s;
}
#contenedor:hover
{
width:1100px;
}
ojala me puedan ayudar saludos!!
también lo hice con css, puedes ver el código fuente para entenderlo.