Css 关注于 input div 出现

19 浏览
0 Comments

Css 关注于 input div 出现

我有这样一段代码：

是否有可能仅使用CSS使得当input type="text"处于焦点状态时，list_search会出现？

如果可以，要如何实现？

非常感谢您的帮助。

0

2 答案

0 Comments

问题出现的原因是代码中使用了错误的选择器，应该使用input[type="text"]作为选择器来选中文本输入框。解决方法是将代码中的选择器改为正确的选择器。

文章内容如下：

如果你正在使用jQuery，并且刚刚开始学习JS，我强烈建议你使用下面的代码来实现输入框聚焦后显示 div 的效果：

$('input[type="text"]').focus(function(e){
    $('.list_search').toggle();
}).blur(function(e){
    $('.list_search').toggle();
});

不知道为什么，上面的代码还是不起作用 🙁

0
0 Comments

问题的出现原因：想要在输入框获得焦点时显示一个隐藏的div，但是通过CSS选择器无法直接选择到隐藏的div。

解决方法：通过改变HTML结构，将输入框和div放置在同一个父元素下，使得div成为输入框的直接下一个兄弟元素。然后使用CSS选择器中的“+”符号来选择下一个兄弟元素，当输入框获得焦点时，改变兄弟元素的display属性为block，从而显示div。

具体的解决方法如下：


div {
    background: #f0a;
    display: none;
    height: 200px;
    width: 200px; 
}
input:focus + div { 
    display: block; 
}

以上代码中，首先将div的display属性设置为none，隐藏div。然后使用input:focus + div选择器来选择输入框的下一个兄弟元素div，并将其display属性设置为block，从而在输入框获得焦点时显示div。

需要注意的是，为了让选择器生效，输入框和div应该是直接相邻的兄弟元素。也就是说，div必须紧跟在输入框的后面。

相关示例可以查看以下链接：http://jsfiddle.net/TheNix/U28sd/

另外，需要注意的是，使用“+”选择器在IE7及更高版本中都可以正常工作。但是在异步加载内容时可能会有一些问题。此外，选择器中的“+”符号实际上表示的是“紧跟在X后面的元素，如果它满足Y的条件”。因此，如果了解HTML的结构并且愿意使用一些“hack”的方法，也可以通过计数的方式来选择目标元素，例如使用“input + div + div”来选择第二个div（前提是HTML结构完全匹配）。但是这种方法并不推荐，因为一旦HTML结构发生微小的变化，就会导致选择器失效，同时也难以维护。

如果想要了解更多关于选择器的信息，可以参考以下链接：http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors

总结起来，通过改变HTML结构和使用CSS选择器中的“+”符号，可以实现在输入框获得焦点时显示隐藏的div的效果。这种方法可以在大多数现代浏览器中正常工作，并且代码简洁易于维护。

0