css - 在输入框聚焦时保持下拉可见

Question

我的导航栏有用于登录和搜索的下拉“字段集”，如下所示:

<div class="nav-button" id="nav-box">
        <a class="inside-link">
            <span id="inside-text">Sign in</span>
        </a>
        <fieldset id="menu-box" class="menu-box">
            <form method="post" id="forms" class="forms" action="checklogin.php">
                <label for="username">Username or email</label>
                <input type="text" id="username" name="username" value="" title="username" tabindex="4">

                <label for="password">Password</label>
                <input type="password" id="password" name="password" value="" title="password" tabindex="5">

                <input type="submit" id="small-btn" value="Sign in" tabindex="6">
                <input type="checkbox" id="remember" name="remember_me" value="1" tabindex="7">
                <label for="remember">Remember me</label>
                <br />
                <a href="#"id="resend_password_link">Forgot your password?</a> 
                <a id='forgot_username_link' title="If you remember your password, try logging in with your email" href="#">Forgot your username?</a> 
            </form>
        </fieldset>
    </div>

我这里有一个 fiddle :http://jsfiddle.net/WBrns/5/

当“搜索”、“用户名”和“密码”等输入框处于焦点状态时，我希望关联的下拉菜单不会消失，这样用户在键入时不必将鼠标放在下拉菜单中。

CSS 中的第 288 行是我们的第一次尝试，但显然行不通。我的网站已经包含 jQuery，因此任何 js/jquery 解决方案都是可以接受的(因为我认为纯 css 是不可能的)

谢谢!

Answer 1

在您的 hover 样式上，确保属性具有 !important 命令，然后使用下面的代码，同时记住将 id 和类替换为您需要的内容:

$("input").focus(function () { that=this;
    $(this).parent(".drop").css("display", "block");

    $(this).blur(function() {
        $(that).parent(".drop").css("display", "none"); 
    });
})

你可以在这里看一个例子:http://jsfiddle.net/WBrns/12/

如果用户开始输入，即使他们将鼠标移开，下拉菜单也不应消失。但是，如果他们在下拉列表之外单击，它将被隐藏。