Css关注输入div出现[重复]
Posted
技术标签:
【中文标题】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();
);
【讨论】:
我不知道为什么这仍然不起作用:(以上是关于Css关注输入div出现[重复]的主要内容,如果未能解决你的问题,请参考以下文章
CSS3关于动画的问题,动画停止后让他的display等于none,再让他等于block就会出现动画重复问题。