Mantener formulario mostrado

Viturbiko · #1 (**permalink**) 26/03/2016, 05:44

Buenas, estoy intentando hacer un botón que al hacer click muestre un formulario de acceso, y al salir el ratón de ese formulario el formulario vuelva a esconderse.

El problema que tengo es que aunque consigo que esto ocurra con el formulario, cuando el ratón se acerca a algún input o label, el formulario se oculta, entiendo que porque de alguna manera ha "abandonado" el form.

Dejo el código a ver si me podéis ayudar:

Código:

<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>

Código:

$(document).ready(function(){
	$('#login').hide();

	$('#acceso').click(function(){
		$('#login').slideDown("slow");
	})

	$('#login').hover(function(){
		$('#login').show();
	})

	$('#login').mouseout(function(){
		$('#login').slideUp("slow");
	})

})

#acceso es el botón al que se hace click para mostrar el formulario.

¿Alguna solución?

Gracias y un saludo

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>

Viturbiko · #3 (**permalink**) 03/04/2016, 05:55

Haciendolo así me pasa lo mismo, al pasar el raton por un campo del formulario o por algún botón la ventanita se oculta.

¿Alguna otra idea?

Gracias y un saludo.

sintel_1 · #4 (**permalink**) 04/04/2016, 12:23

Hola.

yo probaria con mouseleave en lugar de mouseout asi indicas que se oculte cuando se sale del la capa, no cuando este fuera de la capa.

Código Javascript:

Ver original$(document).ready(function(){
    $('#login').hide();
 
    $('#acceso').click(function(){
        $('#login').slideDown("slow");
    })
 
    $('#login').hover(function(){
        $('#login').show();
    })
 
    $('#login').on("mouseleave",function(){
        $('#login').slideUp("slow");
    })
 
})

Saludos

Viturbiko · #5 (**permalink**) 16/05/2016, 05:28

Así si funciona, es justo lo que quería.

Muchísimas gracias ;)