如果将鼠标悬停在登录按钮之外,则会显示下拉菜单,我希望仅在将鼠标悬停在登录按钮上时显示该菜单,该怎么办?
另外,如何将登录按钮放在最右边?
答案 0 :(得分:1)
您已将鼠标悬停在.dropdown div上,该鼠标具有表单,登录按钮和其他元素。因此,每当您将鼠标悬停在.dropdown div上时,您都会看到下拉菜单。
如果希望仅当用户将鼠标悬停在登录菜单上时才显示下拉菜单,则需要在登录按钮上添加:hover。或者,您可以通过在登录按钮上添加JavaScript mouseover侦听器来控制它们。
希望以下代码对您有所帮助。
<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>