包含鼠標輸入消失的Div

我想在鼠標位於div的邊界時保持div可見，代碼一直運行，直到它懸停在輸入上。我想要一個註冊表單出現onmouseover，並且當登錄完成並且鼠標離開div時不再可見。 jsFiddle Demo 包含鼠標輸入消失的Div

HTML

<div class="members"> 
    <a href="#" id="signUp" class="box">Members</a> 
    <div id="sign-up-form" class="sign-up-form"> 
     <input type="text" name="firstName"> 
    </div> 
</div>

var signUp = document.getElementById('signUp'); 
var signUpForm = document.getElementById('sign-up-form'); 

signUp.onmouseover = function(){  
    signUpForm.style.display = 'block'; 
} 
signUpForm.onmouseout = function(){ 
    signUpForm.style.display = 'none'; 
}

CSS

#signUp{ 
    position: relative; 
    background-color: red; 
    color: white; 
    padding: 6px; 
} 

#sign-up-form{ 
    display: none; 
    position:absolute; 
    top: 32px; 
    left: 8px; 
    background-color: rgba(0,83,159,0.6); 
    padding: 15px; 
}

來源

2014-09-03 StudentRik

您是否嘗試過CSS '懸停' 選擇？ – felipekm 2014-09-03 19:42:24

雖然不完全相同，但我會在任何一天選擇在'div.members'上選擇'：hover'。演示文稿不應該在JS中。 – 2014-09-03 19:43:04

儘管我同意它應該在CSS中完成，http://jsfiddle.net/9xhb532v/2/這不是一個真正的解決方案 – 2014-09-03 19:58:59

我只用CSS做這種：

#sign-up-form { 
    display: none; 
} 

.members:hover #sign-up-form { 
    display: block; 
}

來源

2014-09-03 19:44:42

唯一的問題是成員塊和表單之間的CSS差距。沒有對定位進行輕微調整，您將遇到與OP原始代碼相同的問題。 – epascarello 2014-09-03 19:45:03

多數民衆贊成在與你懸停在註冊按鈕上的CSS和表單顯示然後你移動填充表單，懸停消失了！我可以看到@Etiennemiret – StudentRik 2014-09-03 19:47:10

因爲有一個像素的差距。如果'top：32px;'減少了一個像素，它就可以正常工作。 – epascarello 2014-09-03 19:47:58

本示例使用mouseover和mouseout事件偵聽器以及在更改signUpForm元素的顯示之前會偵聽所有子元素的函數。

function outVis(event) { 
     var e = event.toElement || event.relatedTarget; 
     if (e.parentNode == this || e == this) { 
      return; 
     } 
    signUpForm.style.display = 'none'; 
}

http://jsfiddle.net/9xhb532v/1/

來源

2014-09-03 19:56:17 IronFlare

包含鼠標輸入消失的Div

回答

相關問題