如何在mouseover上顯示錶單並將其隱藏在mouseout上？

Question

我有一個登錄p標籤，當我將鼠標懸停在上面時，我需要顯示登錄表單並將其隱藏在鼠標上， 我該怎麼做？

Answer 1

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

this.style.display = "block"; 
} 

formObj.onmouseout = function() 
{ 

this.style.display = "none"; 
} 

Answer 2

的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 3

什麼迪你試試？

我有一個登錄p標籤

爲了簡單起見，（對我有利）讓我們使它成爲一個div標籤

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

和表單

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

當我把鼠標放在它上面我需要t O顯示一個登錄表單，並隱藏在 鼠標了

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

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

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

這是非常簡單的，對不對？從下次開始，你可能會想問一些問題。

隱藏並顯示容器格，因爲當用戶鼠標不在父級和鼠標移入表單中時不希望表單隱藏。

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