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>

Share:
11,753

Related videos on Youtube

Ab Le
Author by

Ab Le

Updated on June 04, 2022

Comments

  • Ab Le
    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
      Nikhil Aggarwal almost 9 years
      If this div was an anchor, then there is :visited would have helped you. In case of div, need to think.
    • ᔕᖺᘎᕊ
      ᔕᖺᘎᕊ almost 9 years
      possible duplicate of Show / hide div on click with CSS
  • Ab Le
    Ab Le almost 9 years
    I 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
    George almost 9 years
    that would be the best advice if you are able to run jquery on the clients. thanks for the quick reply :)