Hover effect disappear after I apply javascript on the object

Question

everyone!

So here's the problem. I am doing a Frontend Mentor challenge and I applied a hover effect on a object in CSS.

.numero-avaliacao a:hover {
    background-color: hsl(217, 12%, 63%);
    color: white;
}

hover effect working

And it worked fine. However, after I applied a javascript event on these objects, the hover effect dissapears for all of them. All I did with the JS was change the background color and the color of the objects. However, it seems that somehow this affects the hover effect.

function selecionarNota() {

    if (this.style.backgroundColor == 'rgb(251, 116, 19)') {

        for (let i = 0; i < numAvaliacao.length; i++) {
            numAvaliacao[i].style.backgroundColor = 'hsl(213, 19%, 21%)';
            numAvaliacao[i].style.color = 'hsl(217, 12%, 63%)';
        }

    } else {

        for (let i = 0; i < numAvaliacao.length; i++) {
            numAvaliacao[i].style.backgroundColor = 'hsl(213, 19%, 21%)';
            numAvaliacao[i].style.color = 'hsl(217, 12%, 63%)';
            console.log('Teste 2!');
        }

        this.style.backgroundColor = 'rgb(251, 116, 19)';
        this.style.color = 'white';

    }
}

I worked out this problem by using mouseover and mouseleave on JS, but I would really like to understand what is happening so I can fix it and be able to use the hover effect as well.

Answer 1

Inline styles have a higher precedence then you external css stylesheet.

When your :hover from your stylesheet is triggered it can't override your via javascript defined inline style for background-color and color.

You could add an !important tag after your declaration in your stylesheet.

.numero-avaliacao a:hover {
   background-color: hsl(217, 12%, 63%) !important;
   color: white !important;
}

This should do the trick.

Another option would be to add another class to your elements via javascript instead of setting inline style.