html - 悬停自动完成建议使元素消失

Question

我有一个登录表单，当您将鼠标悬停在链接上时它会自动显示。所以基本上，当您将鼠标悬停在 a 上时，表单会将其规则 display: none 更新为 display: block

当我开始填写字段时，浏览器会根据之前的输入显示建议。但是，当我想选择建议时，元素 再次将自身设置为 display: none。

我不想设置 autocomplete="off"。

建议不言而喻

悬停建议时整个表单消失

示范

* {
  box-sizing: border-box;
}

form {
  display: none;
}

div:hover form {
  background-color: #f1f1f1;
  display: block;
  padding: 15px;
}

<p>Fill in a sample username and password, after that you get an fiddle error. Just reload the fiddle and then the autocomplete shows you suggestions</p>

<div class="hover">
  <span>HOVER TO SHOW LOGIN FORM</span>
  <form method="post">
    <input type="text" id="username" name="username" placeholder="username" />
    <input type="password" id="password" name="password" placeholder="password" />
    <input type="submit" name="login" value="login" />
  </form>
</div>

如何防止这种行为？

Answer 1

尝试在输入焦点时移除悬停 a fiddle

$('input').blur(function() {
   $('.wrapper').addClass('hover');
  })
  .focus(function() {
    $('.wrapper').removeClass('hover');
  });

更新
您也可以添加 mouseleave，以便在鼠标输入结束时添加悬停类
updated fiddle

$('input').blur(function() {
   $('.wrapper').addClass('hover');
  })
  .mouseleave(function() {
    $('.wrapper').addClass('hover');
  })
  .focus(function() {
    $('.wrapper').removeClass('hover');
  });