CODEWITHSUNDEEP
javascripthtmlcss
swati
swati

Reputation: 41

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?

Upvotes: 4

Views: 20759

Answers (3)

Ahsan Rathod
Ahsan Rathod

Reputation: 5505

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

$("#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/

Upvotes: 6

Nivas
Nivas

Reputation: 18334

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/

Upvotes: 1

sushil bharwani
sushil bharwani

Reputation: 30187


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

this.style.display = "block";
}

formObj.onmouseout = function()
{

this.style.display = "none";
}

Upvotes: 0

Related Questions