Webstudio
Log in

Join the Webstudio community

Updated 5 months ago

Is there a way to configure events specifically for hover over state?

At a glance

The community member is a lawyer who is trying to create a hover effect in their navbar where an image is shown when a menu option is hovered over. They are using Perplexity and have taken a Webstudio course, but have not been able to achieve the desired effect. The comments suggest that the hover state is selectable in the token menu, but the exact UX/UI the community member is aiming for is unclear. Another community member suggests that this is not a simple hover effect and that the Webstudio team is working on an animations engine that may allow for this functionality. In the meantime, the alternative is to write custom JavaScript to connect the two unrelated elements.

ssportsdali.ai
My desired effect: in my navbar, when user hovers over a menu option, an image is shown, images change depending on which option is hovered over.

I am not a coder (I'm a lawyer), I am doing this with the help of Perplexity, that is more or less useful; and I have also taken the Webstudio course and watched the Youtube videos on variables. I haven't been able to crack this problem despite this self-learning efforts. Normally, in other platforms, there's a way to set up the events specifically for the hover state, but I don't see the option in Webstudio.
O
s
5 comments
OOleg Isonen
Hover state is selectable in token menu
OOleg Isonen
not sure what exact ux UI are aiming for, if its descendands of the hovred element or not
ssportsdali.ai
Thanks Oleg. Yes, I have actually configured hover state before, to change styles (colors, transformations, etc.) for a certain element. However, in this case, it's two elements of essentially the same hierarchy within a parent. If I hover over one of them (in this case, an option within the navbar menu) the other one should show (in this case, an image corresponding to the option being hovered over). It seems I have to interconnect the two elements somehow, I just don't know how. I recorded an 8 secs video to show what I mean.
OOleg Isonen
Ok these are not simple hover effects. We are working on animations engine which would allow stuff like this most likely.
Alternative right now is to write custom js that connects these 2 unrelated things.
ssportsdali.ai
OK thanks Oleg, I understand
Add a reply
Sign up and join the conversation on Discord