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

<强> demo

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

1 个答案: