Figma Support Forum

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.

1 Like

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: