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

Question

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

当我开始填写字段时，浏览器会根据之前的输入显示建议。但是当我想选择建议时，element 再次将自己设置为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');
  });

Answer 2

这是一个简单的例子，虽然你需要使用一点 js，我认为没有它你就无法解决这个问题。

为了简单起见，我在这里使用了 jquery，只是操纵了 css 属性，但你也可以使用 vanilla js 并添加一个类或类似的东西。

我还在测试时将表单包装在另一个 div 中，您可能不一定需要：

当您单击其他位置时，我并没有将显示更改回来，因为老实说，如果您已经单击了表单并意外单击其他位置并使其消失，那会很烦人....但是您可以当然添加;）

$("form").click(()=>
{ 
      $(".hideForm").css("display","block");
})

* {
  box-sizing: border-box;
}

.hideForm {
  display: none;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
  <div class="hideForm">
<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>
</div>