javascript - 将鼠标悬停在按钮外？

Question

如果我将鼠标悬停在登录按钮外，会出现下拉菜单，我希望只有当我将鼠标悬停在按钮上时它才会出现，我该怎么做？

另外，如何将登录按钮放在最右边？

Answer 1

您已经在具有表单、登录按钮和其他元素的 .dropdown div 上添加了悬停。因此，只要将鼠标悬停在 .dropdown div 上，您就会看到下拉菜单。

如果您希望仅当用户将鼠标悬停在登录菜单上时才显示下拉菜单，那么您需要添加 :hover on login 按钮。或者您可以通过在登录按钮上添加 JavaScript 鼠标悬停监听器来控制相同的内容。

希望以下代码对您有所帮助。

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