About the Interactive Components community file:
Why do some of the interactions use a combination of “Mouse Enter + Mouse Leave” versus just “While Hovering.” For example, the dropdown menus? I understand the differences between “While Hovering” and “Mouse Enter”. It’s the combination of “Mouse Enter + Mouse Leave” that I don’t get, versus just “While Hovering.” I wasn’t able to join the Office Hours to ask this question. 
The only thing I can think of is when I sometimes use “While Hovering” with opening more than one Overlay, the first overlay doesn’t go away if I close the second.
For example - a dropdown menu that opens a modal dialog. Close the dialog, the dropdown menu still appears if I use “while Hovering” for the menu to appear.
Thanks!
2 Likes
The playground file has a good example with this dropdown menu:
If you use a
While hovering event and then move onto a menu item, say Tomato, you’ve moved your mouse out of the dimensions of the original variant, and so as far as it’s concerned you’re not hovering anymore and it reverts back.
Instead you use Mouse enter, so just moving your mouse in will open the dropdown. You still want it to close when you stop hovering, and this is controlled by a Mouse leave.
So basically anywhere While hovering would snap back to the original component where you don’t want it to, you use Mouse enter + Mouse leave to have more granular control over it yourself.
15 Likes
Ahhhhh!! Cool okay. I guess because our apps don’t show dropdowns on hover, it never occurred to me how this is exactly used. Really appreciate the detailed explanation, thank you! Will pass this on to the team too. 
Does anyone have the Share link to the playground file for this? I can’t find it for the life of me but I really want to review it 
Tagging you guys just in case you do have the Share link for it. Thanks, @Baffour and @megaroeny !!
@Daniel_Solberg Yup here you go! Make sure to 
it so you can bookmark it in your profile Likes 
1 Like
Omg thank youuuuuuuuuu! I seriously can’t express how much I appreciate this haha 
1 Like
@megaroeny Actually that is not quite right, there is another playground here that can be interesting even in designing an App
Mouse Enter/Mouse Leave can have different setting on animation, for instance, you can Ease in, on entering the mouse and Ease out when leaving (or pressed)
this way you End up much smoother animation
I don’t know what you mean by, it’s not quite right. This topic is about interactions, not animations.
This solves the problem of being able to select the option. But the menu is reset every time you move the mouse. Is there a solution so that it does not reset?
1 Like
There is @Tomas_Sapia , But takes too much time
You need to create a variant for every possible situation and prototype it in the correct order
I have a drop down menu and used the “mouse leave” trigger to close the sub menu list. However, this trigger also removes the hover effect on the sub menu items. If I choose to close the menu with the “On-Click” option, my hover effects do not get removed. Why do my sub menu items lose their hover effect when I use the “Mouse leave” trigger?
Old thread but i found a solution after research. On “mouse leave” there is an option called “After delay”. Check it and the default setting should work to avoid resetting.
1 Like
