html - 在 Firefox 中悬停输入自动完成时 Div 消失

Question

我编了一个JSFiddle .

这是一个登录表单，当鼠标悬停在“登录”菜单上时会出现，但是当鼠标悬停在输入自动完成时，登录表单会消失，我不希望这样。

如何在不禁用输入自动完成的情况下保留登录表单，这只能用 css 实现吗？

<div class="login"> <span>Sign in</span>

  <div class="login_form">
    <label for="email">Email:</label>
    <input type="text" id="email" name="email" value="" />
    <label for="pass">Password:</label>
    <input type="password" id="pass" name="pass" value="" />
    <input type="submit" class="" value="Sign in" />
  </div>

</div>

.login {
  position: relative;
  height:60px;
  width:50px;
  margin:30px;
}
.login:hover .login_form {
  display: block;
}
.login_form {
  box-shadow: 0 0 1px;
  padding:10px;
  position: absolute;
  left: 0px;
  top: 30px;
  z-index: 9999;
  display: none;
}

Answer 1

不是一个好的解决方案，但却是一个非常有用的提示:http://jsfiddle.net/ymDTj/2/

使用 JavaScript (jQuery):

$('.login').on('mouseover', function () {
    $('.login_form', this).show();
}).on('mouseout', function (e) {
    if (!$(e.target).is('input')) {
        $('.login_form', this).hide();
    }
});