Streaming live at 10am (PST)

Link hover properties overriden by interaction triggers

Hi,

I’m trying to change the hover properties when certain page elements are scrolled into view for a navigation link. This is the nav bar when it isn’t hovered over:

I’m having trouble trying to make the navigation link turn white when it is hovered over at the top of the page:

Basically, what I am trying to do is when the page first loads, the background colour of the navigation bar is white and the logo is in colour, and the navigation link starts off blue but when you hover over it, the background changes to dark blue and the text starts off white.

Once you scroll into the next section, the background colour of the navigation bar is blue and the logo turns white, and the navigation link becomes white and on hover, it becomes a dark blue (the text can stay white, I don’t mind that).

I’ve managed to change the background colour and logos into what I want, but I’m having a lot of trouble with the hover interaction of the text when the bar is white again. For some reason, the interaction triggers override my initial hover properties for the navigation link.

This is a link to the site: https://preview.webflow.com/preview/website-2-0-ae713a?utm_medium=preview_link&utm_source=designer&utm_content=website-2-0-ae713a&preview=c89c384e6b312d239677b6f5467fee3b&pageId=5db137c0f782f99c475595ed&mode=preview

Any help would be much appreciated!!


Here is my public share link: LINK
(how to access public share link)