Foros del Web - Ver Mensaje Individual

MrGilbertMan · #2 (**permalink**) 26/03/2016, 10:31

Juega con algo así:

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
        <script src="jquery-2.1.1.js"></script>
        <style>
            #prueba{padding:2em;background:#E5E5E5; min-width:100%; height:100px;}
            #login{background:red; padding:5em;}
        </style>
    </head>
    <body>
        <div id="prueba">
            <form id="login">
                <label for="nombre">Nombre de usuario</label>
                <input type="text" id="nombre" placeholder="Nombre de usuario">
                <label for="contrasena">Contraseña</label>
                <input type="password" id="pass" placeholder="Contraseña">
                <input type="submit" value="Acceder">
            </form>
            <button type="button" id="acceso">boton</button>
        </div>
 
<script>
 
$(document).ready(function(){
    $('#login').hide();
 
    $('#acceso').click(function(){
        $('#login').slideDown("slow");
    })
 
    $('#login').hover(function(){
        $('#login').show();
    })
 
    $('#prueba').hover(function(){
        $('#login').slideUp("slow");
    })
 
})
 
</script>
</body>
</html>