Css关注输入div出现[重复]

Posted 2023-03-06

【中文标题】Css关注输入div出现[重复]

【英文标题】：Css Focus on input div appearing [duplicate]

【发布时间】：2012-10-30 04:57:25

【问题描述】：

我有这样的代码：

<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 来产生当 input type="text" 成为焦点时的效果 list_search 会出现吗？ 如果是，怎么做？

非常感谢您的帮助

【问题讨论】：

不，您需要使用 javascript 来执行此操作。

非常感谢 :D 能否请您为此编写 javascript 代码，我仍然没有介绍 javascript...

【参考方案1】：

如果你能够稍微改变你的标记，这实际上是可以使用纯 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

【讨论】：

完美答案！！！非常感谢，太好了！ :)

很高兴能帮上忙。欢迎来到堆栈溢出。 :)

这很聪明。对于后代，它适用于 >=IE7

好点，@jibsales。为了我们未来的读者，我已将其添加到我的答案中。 :)

【参考方案2】：

如果您使用的是 jQuery（如果您刚开始使用 JS，我强烈建议您这样做）

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

【讨论】：

我不知道为什么这仍然不起作用:(