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();
    }
});

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

1 个答案: