Mouse Enter + Leave vs While Hovering?

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

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.


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.


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. :pray:t3:

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 :weary:

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 :heart: it so you can bookmark it in your profile Likes :wink:

1 Like

Omg thank youuuuuuuuuu! I seriously can’t express how much I appreciate this haha :raised_hands:

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.