Using Hover Effects with pseudo class :active or on click

[davideng14]

Hi, how couId I apply hover effects when it's clicked some div has some class hover.css, I tried copy the css rules and added the pseudo class :active but it didn't work, Thanks

[sixcious]

Unfortunately, :active is only in effect while the click (mouse button) is held by the user, so the animations will go very quickly or may not work.

There are a few CSS-only hacks to trigger animations that bypass JavaScript (using :target and anchors, dummy checkboxes, etc), but the cleanest and best solution I've found is really just using vanilla JS to attach a click event listener and toggling the hover class.

Hover.css

In hover.css, comment out the :hover :focus :active pseudo-class names, and instead define that CSS as a separate class. E.g. for hvr-push you could add a -click to the name:

/*.hvr-push:hover, .hvr-push:focus, .hvr-push:active */ .hvr-push-click { ... }

JavaScript

Attach the click event listener to the element:

document.getElementById("my-button").addEventListener("click", clickButton, false);

Define the click function that will trigger (toggle) the -click class, but make sure to use the setTimeout() to force a tiny delay when adding it back.

function clickButton() {
  var that = this;
  this.classList.remove("hvr-push-click");
  setTimeout(function() {  that.classList.add("hvr-push-click"); }, 0);
}

HTML

Make sure to give the element the regular (not click) hvr-push class:
<input id="my-button" class="hvr-push" type="image" src="img/button.png" alt=""/>

[ghost]

So would this be the way to assign the same css styles used for the hover effect to the selected menu item when the item selected for a nav menu?

For example. I am using the hvr-underline-from-center effect and renamed them to .menu-item class, and would like the same underline style to be the static style for the .current-menu-item class.