CSS 焦点在输入 div 出现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13315419/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Css Focus on input div appearing
提问by Gan
I have such a code :
我有这样的代码：
<div class="lighter">
<form method="get" action="http://www.google.pl" id="search">
<span>
<input id="button_search" type="image" src="images/search.png" id="button_search"/>
</span>
<span>
<input type="text" class="search rounded" placeholder="Search...">
</span>
<div class= "list_search">
<ul>
<li class="search_link"><a href="">Search all of Movies</a></li>
<li class="search_link"><a href="">Advanced Search</a></li>
</ul>
</div>
</form>
</div>
Is it possible simply using css to have an effect that when input type="text" is on focus list_search will appear? If yes, how?
是否可以简单地使用 css 来产生当 input type="text" 在焦点上时会出现 list_search 的效果？如果是，如何？
Thanks a lot for help
非常感谢帮助
回答by Nix
This is actually possible with pure CSS, if you are able to change your markup slightly.
如果您能够稍微更改标记，这实际上可以使用纯 CSS。
div {
background: #f0a;
display: none;
height: 200px;
width: 200px; }
input:focus + div { display: block; }
What I essentially do, is that first hide the div, and when the input field has focus, the immediate next sibling matching divchanges it's displaymode to block.
我本质上做的是首先隐藏div，当输入字段具有焦点时，紧邻的下一个同级匹配div将其display模式更改为block.
For this to work, it must be the immediate next sibling, as you cannot travel up the DOM tree, so you need to unwrap your inputfield. from the span.
要使其工作，它必须是紧邻的下一个兄弟节点，因为您无法沿着 DOM 树向上移动，因此您需要解开您的input字段。从span.
See my fiddle: http://jsfiddle.net/TheNix/U28sd/
看我的小提琴：http: //jsfiddle.net/TheNix/U28sd/
EDIT:
The "adjacent selector" (+) should work in IE7 and up (although I think there might be some issues with asynchronously loaded content). Note that the element must come immediately after, so it's just not "next element that matches Y" but actually "the element immediately following X, IF it matches Y".
编辑：
“相邻选择器” ( +) 应该在 IE7 及更高版本中工作（尽管我认为异步加载的内容可能存在一些问题）。请注意，元素必须紧随其后，因此它不是“下一个与 Y 匹配的元素”，而是“紧跟在 X 之后的元素，如果它与 Y 匹配”。
Some times, if you know the markup and you like to hack, you can "count" your way down. input + div + divwould target the second div, for example (provided the markup exactly matches). Of course, I would not recommend it, as it would blow up at the slightest change in your markup, and would be a pain to maintain.
有时，如果您知道标记并且喜欢破解，则可以“倒数”。例如，input + div + div将针对第二个div（假设标记完全匹配）。当然，我不会推荐它，因为它会在您的标记发生最轻微的变化时爆炸，并且维护起来会很痛苦。
Read more on selectors here: http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
在此处阅读有关选择器的更多信息：http: //www.w3.org/TR/CSS2/selector.html#adjacent-selectors
回答by srquinn
If you are using jQuery (which I strongly suggest if you are just starting out in JS)
如果您正在使用 jQuery（如果您刚开始使用 JS，我强烈建议您这样做）
$(':text').focus(function(e){
$('.list_search').toggle();
}).blur(function(e){
$('.list_search').toggle();
});
