I have 8 navigation link page. Each link is planet which has 3 button and by clicking them info is shown. Each planet has its own color, so for example, when I`m clicking Mercury, these 3 button should have blue background color when i click and also, by default, first button should have blue background color. If I click next nav-link Venus, first button should have yellow bg color and by clicking other buttons, bg color switching to current button.
Problem is that I made this with JS element.style.backgroundColor but than I cant add hover effect with CSS and I dont want to make hover effect with JS bc I know there is some good solution. I tried with data-attributes but removing all 8 planet`s attributes would be crazy. Any ideas?