Div focus using css
11,753
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>
Related videos on Youtube
Author by
Ab Le
Updated on June 04, 2022Comments
-
Ab Le almost 2 years
HTML
<div class="div1"> <ul class="dropdown"> <li>example</li> </ul> <div>
CSS
.dropdown{ visibility: hidden } .div1:focus .dropdown{ visibility: visible }
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.
Is there any way to do that?
-
Nikhil Aggarwal almost 9 yearsIf this div was an anchor, then there is :visited would have helped you. In case of div, need to think.
-
ᔕᖺᘎᕊ almost 9 yearspossible duplicate of Show / hide div on click with CSS
-
-
Ab Le almost 9 yearsI have done this before and i do not like the result that you have to hold so in the end i'm decided using jquery but thanks for helping.
-
George almost 9 yearsthat would be the best advice if you are able to run jquery on the clients. thanks for the quick reply :)