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.