使用CSS时链接不工作 [英] Links are not working while using css
本文介绍了使用CSS时链接不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我遇到了Google无法解决的问题。我有一个静态的HTML：
< html>
< head>
< link href =style.css =stylesheettype =text / css/>
< / head>
< body>
< input class =searchtype =textplaceholder =Search .../>
< ul class =results>
< li>< a href =google.com> Google它< / a>
< / li>
< / ul>
< / body>
和css文件：
.search：focus + .results {display：block; }
.results {
display：none;
}
当我关注textBox时显示ul元素，但是当我尝试点击在链接上，它只是消失。请解释为什么发生这种情况。
解决方案
我有一个纯CSS的解决方法。问题不在于链接，而在于忽略输入时隐藏它。所以我改进了你的CSS选择器，在 ul 标签中包含：hover 伪类。工作示例：
.search：focus + .results，ul：hover {display：block; } .results {display：none;}
< html> ;< HEAD> < link href =style.css =stylesheettype =text / css/>< / head>< body> < input class =searchtype =textplaceholder =Search .../> < ul class =results> < li>< a href =google.com> Google它< / a> < /锂> < / body>
I've faced a problem which I couldn't solve by Googling. I've got a static 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>
And the css file:
.search:focus + .results { display: block; }
.results {
display:none;
}
It shows ul element when I textBox is focused, but when I try to click on the link, it just disappears. Please explain why this happens.
解决方案
I have a pure CSS workaround. The problem is not with the link, but with the fact that it is being hidden while unfocusing the input. So I improved your CSS selector to include :hover pseudo-class on the ul tag. Working example:
.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>
这篇关于使用CSS时链接不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
