[英]CSS. Link doesn't works with input:focus
There is fiddle with my problem. 我的问题有摆弄 。
As I can understand -- link doesn't work, because when I click on the link, link disappear because :focus isn't active anymore. 据我了解-链接不起作用,因为当我单击链接时,链接消失了,因为:focus不再有效。 But I can't come up with solution. 但是我无法提出解决方案。
I think it's very common problem, but I didn't found any information about this. 我认为这是一个非常普遍的问题,但是我没有找到任何有关此的信息。
Thanks for any help. 谢谢你的帮助。
CSS : CSS :
#search:focus + #results {
display: block;
}
#results {
display: none;
}
HTML : HTML :
<input id="search" type="text"/>
<ul id="results">
<li><a href="/1"> First </a></li>
<li><a href="/2"> Second </a></li>
<li><a href="/3"> Third </a></li>
</ul>
Just add a hover method to #results: 只需在#results中添加一个悬停方法:
#results:hover{display:block;}
http://jsfiddle.net/gc6L323f/3/ http://jsfiddle.net/gc6L323f/3/
I would suggest in your case to include also :hover
pseudo class and make the #results
object visible on hover. 我建议在您的情况下还包括:hover
伪类,并使#results
对象在悬停时可见。
Like this : 像这样 :
#results:hover {
display: block;
}
You can check working demo . 您可以检查工作演示 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.