Button hover state when other button is selected


On this page I’m trying to create an interaction where a user can choose between monthly or one-time donation. Everything works basically the way I’d like it to: it has the initial state set with a page load animation, it has the color changes based on click that also show/hide the relevant section.

The issue is that the way I have the interactions set up, once a button has been clicked, the hover color no longer works on any of the other buttons. For example, initially if you hover over any of the other dollar amounts they change color. But once you’ve clicked a dollar amount, hovering over the other amounts no longer changes color.

If it helps, I’m trying to mimic the effects on this page.

Thank you!!

Here is my project public share link

Ok, I was able to solve for the effect I’m looking for by using overlays and creating interactions to show/hide those instead. Is there a better way to achieve my goal or is this the best one?