当输入div聚焦时显示div

Question

我想在输入字段聚焦时显示div（活动？） 在以下代码中，我想在.text关注时显示.input。 我正在尝试这个：

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

示例：

JSFiddle

Answer 1

您需要使用sibling CSS selector：

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

Updated Fiddle

Answer 2

您还可以使用general sibling selector ~：

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

JSFiddle