How to remove hover on button with click?

I'm building a character creator using just HTML, CSS and Vanilla JS. I have 3 options for each page that all are buttons and their initial opacity is set to 0.5 but when you hover on the button it will increase the opacity to 1. The intended outcome would be that the user would hover over the selections to increase the opacity and when they click on their choice, it will keep that opacity as they have made their selection. Here is my code below:

CSS:    .hoverEffect:hover{      opacity: 1;     }      .characterChoices{    opacity: 50%;    transition: 0.3s;    }    .characterSelected{      opacity: 1;    }    JS:     rogueButton.addEventListener('click', () => {      rogueButton.classList.remove('hoverEffect')      rogueButton.classList.add('classSelected')      characterSelections[0] = 'Rogue';      characterSelections[8] = 'Dexterity';      document.getElementById("primaryAbilityCS").innerHTML = characterSelections[8];      raceContinue.classList.add('continueButtonSelected');  })  

Any ideas here on where I went wrong and what else could possibly work? I've searched everywhere but I am not sure if this is possible in Vanilla JS with the code I have.

https://stackoverflow.com/questions/66909586/how-to-remove-hover-on-button-with-click April 02, 2021 at 02:12AM