HTML
<div class="div1">
<ul class="dropdown">
<li>example</li>
</ul>
<div>
CSS
.dropdown{
visibility: hidden
}
.div1:focus .dropdown{
visibility: visible
}
我正在尝试使用焦点而不使用 jquery 在 css 中创建单击事件，当我单击 div1 时我需要它，它将隐藏一个下拉菜单 ul。
有什么办法可以做到这一点吗？
最佳答案
你不能用“focus”来做到这一点，但你可以用“active”来做到这一点。大多数浏览器将“事件”视为“单击”事件(即，当您单击某个元素时，该元素处于事件状态)。 检查下面的代码。我刚刚用 Chrome 进行了测试，它按照您的预期工作。还使用 Internet Explorer 进行了测试；它“有点”也适用于此(第二个选择器专门用于 IE)。
希望这对您有帮助。祝你好运!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Title Goes Here</title>
<style>
body {background-color:lightgray}
h1 {color:blue}
p {color:green}
.div1 {
border: 1px solid green;
}
.div1:active .dropdown {
display: none;
}
.dropdown:active {
display: none;
}
</style>
</head>
<body>
<p>This is my web page</p>
<div class="div1">
test
<ul class="dropdown">
<li>example</li>
</ul>
<div>
</body>
</html>关于html - 使用 css 获得 Div 焦点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30832383/