如何使用 jquery 悬停使我的登录表单出现在鼠标悬停时？

Question

我正在制作一个带有下拉登录框的网页。
当鼠标悬停在导航菜单中的列表项上时，登录框应该向下滑动 jquery hover.

登录表单隐藏在 css 中并显示：none，直到将鼠标悬停在登录 link 上。
我已经尝试使用 slideToogle 和 css({"display":"block"})
我无法让它工作，认为它是任何帮助，我们将不胜感激。

这是我页面的摘录：

$("#login").hover(function() {
 $("#login-form").slideToogle();
});

#login {
    list-style: none;
 height: 40px;
}

#login a {
    text-decoration: none;
    color: white;
    background-color: #666;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 10px 20px;
}

#login-form  {
    position: absolute;
    margin-top: 9px;
    display: none;
    float: left;
    clear: both;
    background-color: #666;
    padding: 0 2% 2% 2%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#login-form .text {
    width: 100%;
    float: right;
    margin-bottom: 2%;
}

#login-form .submit {
    float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
    <ul class="ext-nav">
        <li id="login">
            <a  href="#" margin-right="40px">login</a>
                <form id="login-form" action="script/login.php" method="post">
                    <p><input class="text" type="text" name="username" placeholder="username" /></p>
                    <p><input class="text" type="password" name="password" placeholder="password" /></p>
                    <p><input class="submit" type="submit" value="submit" /></p>
                </form>
        </li>
    </ul>
</nav>

Answer 1

您刚刚拼错了函数名称。它应该是 slideToggle() 而不是 slideToogle().

工作版本： http://jsfiddle.net/sajadtorkamani/2L37sn0t/

如何使用 jquery 悬停使我的登录表单出现在鼠标悬停时？

How do I make my login form appear on mouse over using jquery hover?

jquery

html

css

jquery-hover

dropdownbox