Hover the mouse out of button?

Question

If I hover the mouse out of the login button, the dropdown menu appears, I want it to appear only if I hover the mouse on the button, how can I do?

Also, how can I position the login button on the far right?

Answer 1

you have added the hover on the .dropdown div which has the form, login button and other elements. So whenever you hover on the .dropdown div you will see the dropdown menu.

If you want the dropdown menu to be shown only when the user hovers on the login menu then you need to add the :hover on login button. Or you can control the same by adding the JavaScript mouseover listener on login button.

I hope you find the below code helpful.

 <div class="dropdown"> <button>Admin</button> <form action="UserProfile"> <input type="submit" value="Profilo"> </form> <form action="Logout"> <input type="submit" value="Logout"> </form> <span> <button class="logInButton" onclick="openForm()">Login</button> <div id="form-block" class="form-popup"> <form id="signin-form" class="form-container" name="signInForm" action="SignIn" method="post"> <span id="validEmail"></span> <ul style="list-style: none;"> <li><label for="email">Email</label></li> <li><input id="email" class="form-field" type="text" name="email"></li> <span id="validPassword"></span> <li><label for="password">Password</label></li> <li><input id="password" class="form-field" type="password" name="password"></li> <li><button type="submit" class="btn" onclick="return validateForm(signInForm)">Accedi</button></li> <li><button type="submit" class="btn" formaction="SignUp" formnovalidate onclick="clearForm()">Registrati</button></li> <li><button type="button" class="btn-cancel" onclick="closeForm()">Back</button></li> </ul> </form> </div> </div> 

  function openForm() {document.getElementById("form-block").style.display = "block";} function closeForm() {document.getElementById("form-block").style.display = "none" ;} function clearForm() { var form = document.forms["signin-form"]; form.email.value = null; form.password.value = null; } 

  .logInButton { background-color: #345059; margin: 10px 0px 0px 0px; color: white; font-size: 16px; padding: 16px; border: none; overflow: hidden; position: relative; float: right; } .form-popup { display: none; position: absolute; background-color: #f2fcff; } .form-popup a { color: black; padding: 0; text-decoration: none; } .logInButton:hover ~ .form-popup { display: block; } .logInButton:hover {background-color: #2e3538;} 

 <div class="dropdown"> <button>Admin</button> <form action="UserProfile"> <input type="submit" value="Profilo"> </form> <form action="Logout"> <input type="submit" value="Logout"> </form> <span> <button class="logInButton" onclick="openForm()">Login</button> <div id="form-block" class="form-popup"> <form id="signin-form" class="form-container" name="signInForm" action="SignIn" method="post"> <span id="validEmail"></span> <ul style="list-style: none;"> <li><label for="email">Email</label></li> <li><input id="email" class="form-field" type="text" name="email"></li> <span id="validPassword"></span> <li><label for="password">Password</label></li> <li><input id="password" class="form-field" type="password" name="password"></li> <li><button type="submit" class="btn" onclick="return validateForm(signInForm)">Accedi</button></li> <li><button type="submit" class="btn" formaction="SignUp" formnovalidate onclick="clearForm()">Registrati</button></li> <li><button type="button" class="btn-cancel" onclick="closeForm()">Back</button></li> </ul> </form> </div> </div>