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

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/