Css专注于输入div出现

时间:2012-11-09 20:23:43

标签: css focus

我有这样的代码:

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

是否可以简单地使用css具有当输入type =“text”处于焦点时的效果 list_search会出现吗? 如果是,怎么样?

非常感谢您的帮助

2 个答案:

答案 0 :(得分:22)

如果您能够稍微更改标记,那么使用纯CSS实际上是可行的。

div {
    background: #f0a;
    display: none;
    height: 200px;
    width: 200px; }

input:focus + div { display: block; }

我基本上做的是,首先隐藏div,当输入字段具有焦点时,匹配div的紧接下一个兄弟将其display模式更改为block }。

为了使其正常工作,它必须是下一个兄弟,因为你无法前往DOM树,所以你需要打开你的input字段。来自span

看我的小提琴:http://jsfiddle.net/TheNix/U28sd/

修改
“相邻选择器”(+)应该在IE7及更高版本中工作(尽管我认为异步加载的内容可能存在一些问题)。请注意,元素必须紧跟在之后,因此它不是“匹配Y的下一个元素”,而是“紧跟在X之后的元素,如果它匹配Y”。

有时候,如果您知道标记并且想要破解,那么您可以“计算”自己的方式。例如,input + div + div会定位第二个div(假设标记完全匹配)。当然,我不会推荐它,因为它会在标记的最微小变化时爆炸,并且维持起来很痛苦。

在此处阅读有关选择器的更多信息:http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors

答案 1 :(得分:1)

如果您正在使用jQuery(我强烈建议您刚开始使用JS)

$(':text').focus(function(e){
    $('.list_search').toggle();
}).blur(function(e){
    $('.list_search').toggle();
});