CODEWITHSUNDEEP
htmlcssfocus
Ab Le
Ab Le

Reputation: 65

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
}

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?

Upvotes: 2

Views: 14149

Answers (2)

George
George

Reputation: 628

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>

Upvotes: 2

Michael St Clair
Michael St Clair

Reputation: 6625

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/

Upvotes: 0

Related Questions