I have HTML page on this link have many buttons. When mous pointer hover button the button border color changed to orange.
I want after cliked the button, set style hover on button even when leave the button then if clicked on another button remove style hover from perv button and set style hover on button cliked.
I try below code but not work.
$(".bookly-hour").on('click', function(event){
$(".bookly-hour").removeAttr('class');
$(this).addClass("bookly-hour bookly-hour:hover");
});
But not work How can I fix?
2
Answers
You need to override the bookly css and also keep the colour using a class
To achieve the desired effect of keeping the hover style on the clicked button and removing it when another button is clicked, you need to manage the classes correctly. The problem with your current approach is that you are trying to add a pseudo-class (:hover) as a class, which doesn’t work.
Instead, you should define a new CSS class for the active state and toggle that class with JavaScript. Here’s an example of how you can do it: