I need to create a div that remains visible as long as the mouse hovers over it, but disappears when the mouse moves off. Additionally, I want a sign-up form to appear on hover and disappear once the sign-in process is complete. Check out the jsFiddle Demo for reference.
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>
JS
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;
}