:hover Effect Not Working

JavaScript
1

Hello,

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.

2

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) {
    child.classList.add('notclicked');
    child.classList.remove('clicked');
  }

and

function check(id) {
  let letter = document.querySelector(`#${id}`);
  letter.classList.remove('notclicked');
  letter.classList.add('clicked');

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
3

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
4

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
5

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.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.