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

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

UPDATE
您可以添加鼠标离开也是如此，一旦悬停鼠标离开输入
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并添加一个类或类似的东西。

我还包裹在另一格形式，而周围的测试，你可能不一定需要是：

，我并没有改变显示回来时，你点击别的地方，因为说实话，那会是恼人的地狱，如果你已经点击的形式和意外点击别的地方，有它消失了....但是你可以添加，当然;）

$("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>