javascript 如何在鼠标悬停时显示表单并在鼠标悬停时隐藏它？

How to display a form on mouseover and hide it on mouseout?

提问by swati

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?

我有一个登录 p 标签，当我将鼠标悬停在它上面时，我需要显示一个登录表单并在鼠标移开时将其隐藏，我该怎么做？

回答by Ahsan Rathod

Javascript:

Javascript：

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

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

html:

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

http://jsfiddle.net/rathoreahsan/aNWfV/——更新链接

Jquery Solution:

jQuery 解决方案：

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

HTML:

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/

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

回答by Nivas

What did you try?

你尝试了什么？

I have a login p tag

我有一个登录 p 标签

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

为了简单起见（对我有利）让我们把它变成一个div标签

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

隐藏和显示容器 div，因为您不希望在用户鼠标离开父级并将鼠标移入窗体时隐藏窗体。

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

工作示例：http: //jsfiddle.net/nivas/6dzBn/

回答by sushil bharwani

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

this.style.display = "block";
}

formObj.onmouseout = function()
{

this.style.display = "none";
}