javascript - 使用 CSS 隐藏输入后，文本输入框的自动完成下拉列表仍然存在

Question

我使用 CSS left: 9999em;隐藏 <div>和 left: 0em在悬停时显示它。

div包含一个文本输入框。如果在我隐藏 div 时输入框有一个打开的自动完成下拉列表通过移除鼠标，自动完成框仍保留在页面上。

我怎样才能隐藏那个呢？ CSS 解决方案是更可取的。 (我想我知道如何用 jQuery 做到这一点。)我不想禁用这个框的自动完成，我只是希望它在框本身消失时也消失。

JSFiddle:http://jsfiddle.net/ou5cgzpv/

双击后:

移除鼠标后:

Answer 1

CSS - 在此 input 字段被隐藏，而不是你的 inner 元素被移到右边。

#container {
    width: 135px;
    height: 20px;
    background: green;
    padding: 10px;
}
input {
    display: none;
    width: 130px;
}
#container:hover input {
    display: block;
}

HTML 表单

<div id="container">
<form id="form">
    <input type="text" name="autocomplete" />
</form>