How To Display A Form On Mouseover And Hide It On Mouseout?

i have a login p tag,when i mouse over on it i need to display a login form and hide it on mouse out, How can i do that?

Solution 1:

Javascript:

functionshowForm(){
    document.getElementById('loginForm').style.display = "block";
}

functionhideForm(){
    document.getElementById('loginForm').style.display = "none";
}

html:

<form><pid="login"onmouseover="showForm();"onmouseout="hideForm();"><spanclass="label">Login Here</span><spanid="loginForm"><spanclass="form-elements"><spanclass="form-label">Name:</span><spanclass="form-field"><inputtype="name" /></span></span><spanclass="form-elements"><spanclass="form-label">Password:</span><spanclass="form-field"><inputtype="password" /></span></span><spanclass="form-elements"><spanclass="submit-btn"><inputtype="submit"value="Submit" /></span></span></span></p></form>

Demo:

http://jsfiddle.net/rathoreahsan/aNWfV/ -- updated link

Jquery Answer :

$("#login").hover(function() {
    $("#loginForm").css({"display":"block"});
}, function() {
    $("#loginForm").css({"display":"none"});
});

HTML:

<form><pid="login"><spanclass="label">Login Here</span><spanid="loginForm"><spanclass="form-elements"><spanclass="form-label">Name:</span><spanclass="form-field"><inputtype="name" /></span></span><spanclass="form-elements"><spanclass="form-label">Password:</span><spanclass="form-field"><inputtype="password" /></span></span><spanclass="form-elements"><spanclass="submit-btn"><inputtype="submit"value="Submit" /></span></span></span></p></form>

See Demo:

http://jsfiddle.net/rathoreahsan/SGUbC/

Solution 2:

What did you try?

I have a login p tag

For the sake of simplicity (in my favor) let us make it a div tag

<divclass="login">Login</div>

And the Form

<form id="loginForm"></form>

when i mouse over on it i need to display a login form and hide it on mouse out

<div class="login" onmouseover="show()" onmouseout="hide()">Login</div>

functionshow()
{
    document.getElementById("login").display = "block";
}

functionhide()
{
    document.getElementById("login").display = "none";
}

This is pretty simple, right? You may want to try something before you ask, from next time.

Hide and show the container div because you don't want the form to hide when the user mouse's out of the parent and mouses-in to the form.

Working example: http://jsfiddle.net/nivas/6dzBn/

Solution 3:

var formObj = document.getElementById("formName");
formObj .onmouseover = function()
{

this.style.display = "block";
}

formObj.onmouseout = function()
{

this.style.display = "none";
}