我遇到了一个无法通过谷歌搜索解决的问题。我有一个静态 HTML：
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input class="search" type="text" placeholder="Search..." />
<ul class="results">
<li><a href="google.com">Google it</a>
</li>
</ul>
</body>
和CSS文件：
.search:focus + .results { display: block; }
.results {
display:none;
}
当我文本框聚焦时它显示 ul 元素，但是当我尝试单击链接时，它就消失了。请解释为什么会发生这种情况。
我有一个纯 CSS 解决方法。问题不在于链接，而在于它在不聚焦输入时被隐藏。所以我改进了你的 CSS 选择器以包含:hover伪类上ul标签。工作示例：
.search:focus + .results, ul:hover { display: block; }
.results {
display:none;
}
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input class="search" type="text" placeholder="Search..." />
<ul class="results">
<li><a href="google.com">Google it</a>
</li>
</ul>
</body>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
