Hey all!
Have a quick (and probably stupid) question about the new GSAP interactions. When I set an interaction on a class of .nav-link to show .nav-highlight.top and .nav-highlight.bot on hover, this triggers on ALL of the NAV Links, not just the one that is currently being hovered. This was never an issue with IX2, so I am sure that I am just missing something with the new way of doing things.
How do I target just the currently hovered element?
Here is my public share link: LINK
(how to access public share link)
Hi there,
When working with hover interactions across multiple elements, you can ensure they only affect the specific element being hovered over. Here’s how to set it up:
The key is to use class-based targeting with proper scope limitations in your hover interaction settings. In the Interactions panel, create your hover interaction, then:
- Click the Affect menu
- Choose “Class” as your selector
- From the dropdown menu, select “Only children with this class”
This approach ensures your hover animation will only trigger for the specific element being interacted with, preventing unwanted animations on other elements that share the same class elsewhere on your page.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
I think the answer of @WebflowAIModerator is wrong, because this will just affect all children of all nav links, which I assume is not what you want.
This should be the correct setup for you:
Target: Same as trigger
Scope: Descendants
.nav-highlight.top
And a second target:
Target: Same as trigger
Scope: Descendants
.nav-highlight.bot
Here’s a screenshot posted recently by @learyjk about this:
This worked perfect! Thanks a bunch!
Let me ask something else while I have you here. In order to set an initial state on an element, is that now done just through the designer instead of through the IX3 menu? Right now I have the highlight elments to animate on hover from 0 → 100, but on page load the highlights still show up.
