Buenas,
Para que funcione correctamente, hay que ejecutar el script cuando se haya cargado el
DOM y para eso se usa el método ready al que se la pasa la función que se ejecuta al cargarse el DOM.
Código HTML:
Ver original
<script type="text/javascript"> $(document).ready(function(){
$(".contenedor").hover(
function()
{
$(".contenido2").finish().slideDown();
},
function()
{
$(".contenido2").slideUp();
});
});
.contenedor
{
margin:0 auto;
padding: 0;
width: 300px;
border: 1px solid black;
background: white;
}
.contenido1
{
margin:0 auto;
text-align:center;
padding: 0;
height: auto;
background: #CCCCCC;
}
.contenido2
{
margin:0 auto;
text-align:center;
padding: 0;
display:none;
height: auto;
}
p
{
text-align:justify;
margin-top: 3px; margin-right: 3px; margin-bottom: 3px; margin-left: 3px;
}
<div class="contenido1">Importante
</div>
<div class="contenido2"><p>La idea es que este mensaje (capa) permancezca oculto, que solo sea visible la franja que dice importante, que solo cuando el usuario pase el raton sobre esta franja que dice Importante, la capa que contiene el mensaje, se delice hacia abajo y se visualice
</p></div>