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

Question

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

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

它写道：“如果搜索searchtext 不是:focus编辑，如果它是show-on-focus ，则获得下一个兄弟”。

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 ，但它与旧浏览器的兼容性稍好一些。