Question

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

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

<强>演示：

http://jsfiddle.net/rathoreahsan/aNWfV/ - 更新后的链接

Jquery解决方案：

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

参见演示：

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

Answer 2

你尝试了什么？

我有一个登录p标签

为了简单起见（对我有利），让我们将其设为div标记

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

表格

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

当我鼠标悬停在它上面时，我需要显示一个登录表单并隐藏它鼠标出来

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

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

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

这很简单，对吧？从下次开始，你可能想先尝试一下。

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

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

Answer 3


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

this.style.display = "block";
}

formObj.onmouseout = function()
{

this.style.display = "none";
}

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

3 个答案: