Menu Hover Interaction - Affect all menu-items except trigger?

Hi, I have a menu comprising a stack of divs each containing a link. On-Hover, I would like to apply opacity to all links/divs except the hover item.

Is this possible? I can’t figure out how to implement: on-hover, apply opacity to all [div/links] except interaction trigger.

Hopefully there is a way around this other than adding a unique class to each menu item.

Read Only

Click/Scroll past black intro banner, click ‘Projects’ to reveal menu.

Thanks!


I may not be understanding your request but this seems really straight forward. Are you talking about your main fly-out navigation links?

If so, just set “nav-item-cont” to the opacity you want, then create a hover state with opacity set to 100%.


Hi Port_of_Folio,

Thanks for the help - yes those are the ones…

So i’d like all of the links to be 100% white by default. Then when you hover on one of them, the others all dim/have a lower opacity. Which I don’t think your tip quite solves?

Thanks

The thing is, your hover areas for the links are so large, I can’t image a user having the menu open and not having their cursor over one of them. The possibility of seeing everything at 100% white is low. I guess they would if they went to the “close” trigger but I’d take that trade-off for the ease vs. building a more complex interaction.

I’m sure that is the case and that is fine, i’m after this effect (but not purple/white obvs).

Ideally hover will be triggerd by the text itself rather than it’s container.

Thanks

Ah, I see. Yeah, you’ll probably need to create the unique classes to control each element independently. Just production work :slight_smile:

I thought that might be the case… thanks for your time…