Div focus using css

Question

Div focus using css

13.9k views Asked by Ab Le At 16 September 2024 at 06:49

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?

Original Q&A

There are 2 answers

George On 16 June 2015 at 20:47

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>

**Michael St Clair** · Accepted Answer · 2015-06-14 17:40:31

What about using javascript

<div id="div1">
    <ul class="dropdown" id="ul1">
       <li>example</li>
    </ul>
<div>

<style>
.hidden {
    visibility: hidden;
}
</style>

<script>
document.getElementById('div1').onclick=function(){
   var element = document.getElementById("ul1");
    element.classList.add("hidden"); 
};
</script>

JSFiddle: http://jsfiddle.net/4Ls0ygp3/

TechQA.

Div focus using css

There are 2 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in FOCUS

Popular Questions

Popular Tags

Trending Questions