html - 使用不带JavaScript的CSS选择输入时显示div

我的问题是，无论如何，当我开始在输入中写入内容时，如果我将鼠标滑出“ .box” div，它不会消失。

想知道是否有任何选择器或没有Javascript的可能方法。

这是示例：

http://jsfiddle.net/vzRqY/

<div class="box">
    <div class="overlay"><input/></div>
LOREM IPSUM LOREM IPSUM <br/>
LOREM IPSUM LOREM IPSUM LOREM IPSUM
</div>

谢谢

最佳答案

是的，它要求您重新排列input的位置，但要重新排列it can be done。

的HTML

<div class="box">
    <input/>
    <div class="overlay"></div>
LOREM IPSUM LOREM IPSUM <br/>
LOREM IPSUM LOREM IPSUM LOREM IPSUM
</div>

的CSS

.box{
    background : red;
    padding: 20px;
    position: relative;
    width: 200px;
}
.overlay{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(0,0,0,0.6);
    visibility: hidden;
    opacity: 0;
    z-index: 1;
}

.box input {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    width: 50%;
    top: 0;
    left: 50%;
    margin-left: -25%;
    z-index: 2;
}

.box:hover .overlay,
.box:hover input,
.box input:focus,
.box input:focus + .overlay
{
    visibility: visible;
    opacity: 1;
}

关于html - 使用不带JavaScript的CSS选择输入时显示div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10044403/