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:

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

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

html:

<form>
    <p id="login" onmouseover="showForm();" onmouseout="hideForm();">     
        <span class="label">Login Here</span>       
            <span id="loginForm">        
                <span class="form-elements">
                    <span class="form-label">Name:</span>
                    <span class="form-field"><input type="name" /></span>
                </span>        
                <span class="form-elements">
                    <span class="form-label">Password:</span>
                    <span class="form-field"><input type="password" /></span>
                </span>        
                <span class="form-elements">
                    <span class="submit-btn"><input type="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>
    <p id="login">     
        <span class="label">Login Here</span>       
        <span id="loginForm">        
            <span class="form-elements">
                <span class="form-label">Name:</span>
                <span class="form-field"><input type="name" /></span>
            </span>        
            <span class="form-elements">
                <span class="form-label">Password:</span>
                <span class="form-field"><input type="password" /></span> 
            </span>        
            <span class="form-elements">
                <span class="submit-btn"><input type="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

<div class="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>

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

function hide()
{
    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";
}