如何在鼠标悬停时显示窗体并在mouseout上隐藏窗体？ [英] How to display a form on mouseover and hide it on mouseout?

问题描述

我有一个登录p标签，当我的鼠标在它，我需要显示一个登录窗体，并将其隐藏在鼠标出来，
我该怎么办？

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?

推荐答案

Javascript：

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

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

html： b

<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/ - 更新后的连结

http://jsfiddle.net/rathoreahsan/aNWfV/ -- updated link

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/

这篇关于如何在鼠标悬停时显示窗体并在mouseout上隐藏窗体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！