html - 当其中的输入具有焦点时保持div显示

Question

<div>
   <input type="text"/>
</div>

我有一个里面的div元素。input现在，这div上面display: none有财产。现在，当我显示div（通过将鼠标悬停在我网站上的另一个元素上，这里不重要）时，我现在可以在input元素中放置一些文本。但是当我专注于那个input时，我不小心将鼠标移出div元素，这个div元素就消失了。无论鼠标在哪里，当有焦点时，我是否有机会保持我的div元素显示？input

编辑：编辑塞尔吉奥的例子后，这是我面临的问题：http: //jsfiddle.net/2thMQ/1/（尝试在该输入字段中输入一些内容，然后将鼠标移开）

Answer 1

利用input:focus { display:block; }

演示

只有 CSS

div:hover input {
    display:block;
}
input:focus {
    display:block;
}
input {
    display:none;
}

如果您想为父级设置样式，div则可以在 CSS4 中使用。到目前为止，这是一个 javascript 解决方案：

var inp = document.getElementsByTagName('input');
for (var i = 0; i < inp.length; i++) {
    inp[i].onfocus = function(){ this.parentNode.style.display='block';}
    inp[i].onblur = function(){ this.parentNode.style.display='none';}
};

演示