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.
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.