I am trying to add hover states to the text links in my nav-bar, but throughout my page the nav-bar background changes colour and so the text links have to change colour as well. In one state my nav bar has a light blue background and grey text, and then in another state my nav-bar has a dark grey background and white text. I want to create hover states where the text links turn blue.
I tried to use the hover state feature but after I add the text link colour change interactions the hover states stopped working. I have tried making custom hover state interactions but I haven’t been successful as the base colour of the text changes between white and grey.
I have also tried to make two nav-bars, one in the light styling with the hover state function applied and one in the dark styling with the hover state function applied. I had the nav-bars in the same position and changed the opacity on the nav-bar with the higher z-index to create the effect of the background and text colour changing. The hover states worked on the nav-bar with the higher z-index but not the nav-bar with the lower z-index.
Does anyone know any other way I could go about trying to achieve this.
I think I understand what you’re trying to do, and i ended up making two versions of the nav symbol. One on dark backgrounds, and one for light backgrounds. It’s a pain to maintain them, but they rarely change.
In your case of having the background of the nav change based on the background of your page after scrolling (in and out of different sections of the page), the only solution I could quickly think of is to put the Z-Index of the section in between the rest of the page and underneath the nav’s Z-Index. However, your idea of showing hover states by toggling Opacity on hover is interesting.
As time passes, my ideas to create expansive workarounds/hacks to solve a problem sometimes devolve into difficult to manage solutions. I’m not saying your’s falls under this problem, but try going back to simple and easy to manage, if you’re still on the fence about it.
Not a solution, just thoughts from another designer.
Edit: I did just see this post, which possibly contains a solution for you: