当输入内部有焦点时,保持div显示

Question

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

我有一个div元素在input里面.现在,这div有display: none它财产.现在,当我显示div(通过悬停在我网站上的另一个元素,这里不重要)时,我现在可以在input元素中添加一些文本.但是当我专注于那个input,并且我不小心将鼠标移出div元素时,这个div元素就消失了.无论鼠标在哪里都有焦点,我是否有可能保持div元素显示input？

编辑:在编辑Sergio的例子后,这是我面临的问题:http://jsfiddle.net/2thMQ/1/(尝试在输入字段中键入内容然后将鼠标移开)

Answer 1

使用 input:focus { display:block; }

DEMO

只有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';}
};

演示