-1

There is a hover CSS state is it possible to also add a CSS click state?

In the example the browser responds to a mouse hover event and apply specific styles then. Can you do the same on click event?

Supported:

#menu:hover

No response:

#menu:click 


.menu {
   display: none;
}

.menu li:hover {
  background-color: lightgray;
}

button {
  padding: 12px;
}

#hoverMenu {
  position: relative;
  display: inline-block;
}

#hoverMenu:hover .menu {
  display: block;
}


#clickMenu {
  position: relative;
  display: block;
}

#clickMenu:click .menu {
  display: block;
}
<div id="hoverMenu">
   <button>Menu on hover</button>
   <ul class="menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
   </ul>
</div>

<div id="clickMenu">
   <button>Menu on click</button>
   <ul class="menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
   </ul>
</div>

Use cases:

  • when you want menus to show on click rather than on hover
  • when you want to show pop overs that are appropriate to show on click rather than show on hover.
  • when you are not able to use JavaScript or when it would be unnecessary

Does anyone else want to see this in the CSS spec?

1.21 gigawatts
  • 16,517
  • 32
  • 123
  • 231

1 Answers1

1

there is no css for that you need js for doing click event.the close match is :active or :target
but there is a trick or hack in order to do that. and your question already answered here:
Can I have an onclick effect in CSS?
hope this help you.

Ramiel
  • 33
  • 1
  • 8