悬停自动填充建议会使元素消失

Question

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

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

我不想设置autocomplete="off"。

建议显示自己

当悬停建议时整个表单消失

示范

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}

form {
  display: none;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如何防止此行为？

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中，你可能不一定需要：

当你点击其他地方时，我没有改变显示器，因为老实说，如果你已经点击了表格并意外地点击其他地方并让它消失，那就太烦人了......但你当然可以补充一下;）

＆＃13;

＆＃13;

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

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;