I can’t figure out why my hover state interaction is not working for my nav link elements. I’ve done hundreds of hover interactions, so I don’t think it’s something that I’ve done wrong. But I’m stumped… Could this possibly have something to do with my hero section’s “Scroll out of view” interaction which reveals the nav bar?
To go deeper - the hover interaction works. But when the nav is revealed when the page starts scrolling, the hoverIN state is already initiated. If I hover over the link block element, then the hover state will work normally. Here’s a video explaining my problem.
Hi @Hunter_Reynolds nice problem to solve. Can you share a link to be able to take a look inside? One question. Does this problem remain on live site as I have found that preview mode in “Designer” is not always best reference if something works correctly or not.
That’s because I’ve added a “Show/Hide” action to the Nav reveal interaction on the Hero Section in an attempt to fix the problem. This kind of works, but you’ll still notice that the interaction does not fade in as it should. If you hover over the link elements, you’ll see the paint streak immediately pop up, instead of using the expected fade in animation created by the HoverIn Interaction on the Link Block elements. After a few seconds the animation will work again. There seems to be something wrong with the combined interactions.
I think that I have figure it out. You trigger opacity on nav that is class for navigation but also for link button as second class. That’s why button background is triggered together with navigation. All I did I have just created class duplicate of navigation container and renamed it from nav to nav __container and kept class nav only for link button. Than I just add this new container class to animation. This should work. I can do short video about that if you need.