I’m trying to create a navbar that inverts colors depending on the section it is on.
This is a perfect example of what I’m trying to do: https://pitch.com/about
On the blue BG the navbar is blue, and when the BG is white the navbar is also white and all the content on it inverts colors.
I’ve managed to do this BUT I can’t apply hover state effects on my classes after the color changes… Because the new color I set overrides the old class that had hover state applied. So if my navbar is on the default color the hovering effect works, but after my interaction does it job and all the color changes I can’t set the new hover state color. And no hover animation happens.
Any workaround on this? The perfect thing for me would be if the interaction could change the class of my link. This way I create 2 classes, one for each background and with inverted hover states, and with my interaction I toggle around them. But from my research this is not possible…
Thanks a lot