如何在文本框聚焦时显示任何div？

Question

如果div.show聚焦时如何显示input.searchtext？

<div class="select-form-holder">
   <input class="searchtext" type="text" value="Find Friends, Movies, T.V shows Games" />
   <div class="show-on-focus">xyz</div>
   <input type="submit" class="btn-search" title="Search" />
</div>

Answer 1

.searchtext:not(:focus) + .show-on-focus {
    display: none;
}

它的内容如下：＆＃34;如果searchtext 不是:focus ed，请获取下一个兄弟，如果它是show-on-focus＆＃34;。< / p>

Answer 2

使用相邻的兄弟选择器实现此目的的另一种方法。

.show-on-focus { display: none }
.searchtext:focus + .show-on-focus {
    display: block;
}

如果您想要隐藏多个元素，可以使用常规兄弟选择器替换相邻的选择器。

.show-on-focus { display: none }
.searchtext:focus ~ .show-on-focus {
    display: block;
}

两者都不如:not那么性感，但它与旧版浏览器的兼容性稍好一些。