hovermousehoverpermanent

Permanent mouse hover effect on buttons

I made a site with lots of ghostbuttons that change color when the user hovers his or her mouse over them. The buttons are arranged by color like a rainbow and I want them to stay active/colored even when the mouse stops hovering over it so that when the user hovers over the all the buttons, all the buttons will be colored at the same time.

The buttons are all placed within bootstrap columns.

I have no experience with JavaScript so pure CSS would be ideal for me. But if JavaScript is the best way to go with this please let me know exactly how to implant it in HTML and CSS.

Please don't mind any mistakes in the spelling, I'm dutch and dyslectic :P

Thanks in advance!

Solution

  • Place this at the bottom of your code just before the </body> tag.

    <script>
   $(".btn").mouseout(function() {
        $(this).css("background-color","pink");               
    });
</script>

    You can change the (".btn") bit to any class on the page, so if you only wanted it to change btn-primary classes you'd have (".btn-primary") etc.