:hover Effect Not Working


I made a Hangman Game, and I am having trouble with the :hover effect.

I created 26 letter buttons using a for... of loop over the alphabet and assigned each button.className = "button". Then in the last line of my CSS I added a .button:hover effect for a color change when you hover over it.

The thing is, it works as it should when the page first loads, but after my reset() function runs, the :hover effect disappears.

Could someone please advise me on how to retain the :hover effect even after reset() runs?

My Codepen Hangman Game

Thank you.

I’ve run your app locally, not on codepen. Wanted to make sure that it is not the environment issue
I was able to fix it by removing this stuff from reset() function:

for (let child of used.children) {    
    child.style.backgroundColor = "#b3a184";

I am afraid I am not fully understand why it was the issue, but somehow re-writing style dynamically affected pseudo-selector.

I know it will break some functionality, in terms of changing background-color for buttons.

One option to fix that willbe not rewritng style object like you did here:

letter.style.backgroundColor = "#705c3d";

or here:

Instead you can:

add more selectors in CSS:

.clicked {
  background-color: #705c3d;

.notclicked {
  background-color: #b3a184;

In JS, instead of dealing with style object, you can play around classes. Like this:

for (let child of used.children) {


function check(id) {
  let letter = document.querySelector(`#${id}`);

This is example with add and remove methods, you can use toggle method also, it could help to make the code a bit more consice.
Read this for details

1 Like

You are adding a style property on the child node. This have an higher specificity than the ccs file. Check css specificity docs on mdn to understand the topic.

1 Like

You can add !important to the selector style, but you need to be aware of specificity (MDN: Specificity).

Using ids, doing inline styles, and using !important all have different weights. But if you know a style should always be applied and should always overwrite other styles using !important can be fine.

1 Like

Wow. Thank you, everyone for all that information.

I took all of your guys’ advice. I used a couple !important tags, but mainly I did what @admit8490 said and played around with the classes. Now it works as it should.

Thank you very much, everyone.