Can't make seamless hover to hover effects in a menu

Community Beginner ,
Mar 22, 2021 Mar 22, 2021

Copy link to clipboard

Copied

I am trying to build a menu with hover effects. It seems I can trigger the 2nd hover effect only if the 1st effect went to default again. So it's impossible to make one component with 10 states that triggered by hover and you can go from one state to another seamlessly. The default state should always go after any other state. Am I doing something wrong?

 

p.s. I went to every state and made all the transitions from all other states. Like in the state "State 2" transition to "State 1" and to "State 3" etc.

 

Here is the example of the menu

Views

139

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Mar 22, 2021 Mar 22, 2021

Copy link to clipboard

Copied

Hi there,

 

Thanks for reaching out. I found a similar discussion on the community which you can refer to here: https://community.adobe.com/t5/adobe-xd/nested-hovers/m-p/10911044

 

Let us know if this helps or if you need any further assistance.

 

Regards

Rishabh

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 22, 2021 Mar 22, 2021

Copy link to clipboard

Copied

Thanks for the reply. It's a good discussion but unfortunately, it doesn't answer my question. 

I am not really interested in nested components per se. In my case, I need every item in the menu to open the submenu on hover at the same time moving a column to the left (see mp4 attached). I could make for every item a separate component and make the state with submenu and without and trigger them on hover. But in my case, they wouldn't able to move other components to the left if they are separated. So apparently I need to use one element with multiply states.

 

What I did is selected a small object beneath the blue Item (see mp4 attached) and assign in the prototype tab a new state on hover. I would expect when the mouse is leaving this small area the state would switch to Default, but it doesn't! It switches only if the mouse is leaving the whole menu. So I am not against this being playing like hover-default-hover. I would just expect the default would be like a millisecond long. The problem that right now I need to enter the area of the menu, the mouse triggers on hover, leave the area of the menu entirely, then it switches to default and only then I can enter the area again for another hover effect. As you can imagine this doesn't look like a proper working menu. 

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines