使用CSS的Div焦点 [英] Div focus using css
问题描述
HTML
<div class="div1">
<ul class="dropdown">
<li>example</li>
</ul>
<div>
CSS
.dropdown{
visibility: hidden
}
.div1:focus .dropdown{
visibility: visible
}
我正在尝试使用没有jquery的焦点在CSS中创建click事件，当我单击div1时需要它，它将隐藏下拉列表ul.
I'm trying to make click event in css using focus without jquery and I need it when I am clicking on div1 it will hide a dropdown ul.
有什么办法吗?
推荐答案
您不能使用"focus"来做到这一点，但是您可以使用"active"来做到这一点.大多数浏览器都将Active视为"click"事件(即，当您单击某个元素处于活动状态时). 检查下面的代码.我刚刚使用Chrome进行了测试，它可以按您的预期工作.还通过Internet Explorer进行了测试；它也可以排序"(第二个选择器专门用于IE).
You can't do that with "focus", but you may do that with "active". Active is accepted by most browsers as the "click" event (i.e. while you click on an element it is active). Check the code below. I have just tested with Chrome and it works as you intended. Also tested with Internet Explorer; it "sort-of" works with this too (the second selector is specifically for IE).
希望这对您有所帮助.祝你好运！
Hope this helps you out. Good luck!
<!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>
这篇关于使用CSS的Div焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
