How to make hovering over active button not use hover effect?

Question

I have a navigation bar that has a hover effect for the buttons. Also whenever a page is active that button has a border on the right to show that it\'s the page that is current

Answer 1

You can add the following to your CSS:

 .activePage li:hover {
   border-right: 8px solid #38d8a1;
   background: black;
 }

This will keep your border-right: and background the same and not trigger the hover effect that your other li elements receive.

Working Fiddle - https://fiddle.jshell.net/0nw77chv/ (CSS added at the bottom)