Css 聚焦输入框时保持下拉列表可见

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

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

我这里有一把小提琴：

虽然像“搜索”、“用户名”和“密码”这样的输入框是重点，但我希望相关的下拉列表不会消失，这样用户在键入时就不必将鼠标放在下拉列表中

CSS中的第288行是我们的第一次尝试，显然不起作用。我的站点已经包含jQuery，所以任何js/jQuery解决方案都是可以接受的（因为我认为纯css是不可能的）

---

谢谢

在您的

悬停

样式上，确保属性具有

！重要信息

命令，然后使用以下代码，同时记住将id和类替换为您需要的：

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

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

您可以在此处查看一个示例：

---

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

要改进Shaz的回答，您可以命名模糊事件，以防止多个模糊事件附加到同一输入。我还建议使用类名和CSS来显示和隐藏下拉列表，以便您可以利用CSS转换

JS

CSS

---

您可以在输入中添加

focusin

和

focusout

上的侦听器，以便删除（focusin）或重新附加（focusout）允许您隐藏菜单的CSS类。

$('input').focus(function () {
  var $this = $(this);
  var $drop = $this.parents('.drop');

  $drop.addClass('open');
  $this.bind('blur.closeDrop', function () {
    $drop.removeClass('open');
    $this.unbind('blur.closeDrop');
  });
});

.drop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.drop.open {
  opacity: 1;
  pointer-events: auto;
}