Interactive Rating component

Hi, the issue arises because when you revert the styles using js, the styles of the pseudo classes (:hover) are also set to these styles, thus your hover action stops working. Although you coded the hover effect again using js but a simpler solution is that to reset styles of deselected items by setting their style properties to empty string in js, this way the original css styles will take effect.

ratelist[y].style.backgroundColor = "";
ratelist[y].style.color = "";

Now you can remove the hover effect code from js and your page will function as intended.

Hey!! Cheers 🥂 on completing this challenge.. .

Here are my suggestions..

• You should use <main class="rating"> instead of <div class="rating">.
• Go down orderly when you are using the headings h1 down to h2 down to h3 and so on.
• You can wrap your attribution section in a footer tag to avoid accessibility issues.
• You should add a alt text to your img tag to aid screen-readers

This should fix most of your accessibility issues

. Regardless you did amazing... hope you find this useful... Happy coding!!!

great work harleen..keep up your practice.all the best