将鼠标悬停在按钮之外?

时间:2019-06-08 12:19:58

标签: javascript html css

如果将鼠标悬停在登录按钮之外,则会显示下拉菜单,我希望仅在将鼠标悬停在登录按钮上时显示该菜单,该怎么办?

另外,如何将登录按钮放在最右边?

1 个答案:

答案 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>