当输入 div 获得焦点时显示 div

【问题标题】：Display a div when an input div is focused当输入 div 获得焦点时显示 div
【发布时间】：2014-06-16 10:31:54
【问题描述】：

我想在输入字段获得焦点时显示一个 div（活动？）在下面的代码中，我想在.input 获得焦点时显示.text。我正在尝试这个：

HTML：

<div class="box">
    <input class="input" type="text" value="" />
    <div class="text">text</div>
</div>

CSS：

.text { display: none; }   
.input:focus .text { display: block; }

示例：

【问题讨论】：

【解决方案1】：

您需要使用sibling CSS selector:

.input:focus + .text{
    display: block;
}

【讨论】：

【解决方案2】：

你也可以使用general sibling selector~：

.input:focus ~ .text { display: block; }

【讨论】：