Mouse enter & Mouse leave problem

I have a question about mouse enter mouse leave interaction:

In a mega menu with an overlay like this:

when the mouse leaves “Shop by” for example, the overlay doesn’t disappear UNLESS i leave the menu and hover elsewhere on the page, but for example if i hovered around “SHOP BY” and then went to “NEW” the overlay doesn’t change

HERE the figma file

I don’t know what i did wrong so if you could check the file and leave me a note I’ll be
thankful

Seems you posted a link to the file, which requires access. If you can upload the .fig file, we can grab it. :+1:

It “sounds” a little like you just might have the interaction on the wrong place. But having the file will help figure that out.

I approved

1 Like

Yes this is the issue

Sorry I deleted my post.

OK I can look closer in about an hour after work!

1 Like

Ok, thanks!

I am thinking that since the mouse leave is on the nav button, that telling it to close overlay…it doesn’t know what to do. When yuo mouse leave the overlay…it closes. So you know that works. But the button, is not an overlay. So telling it to close itself is not gonna work.

I think I can do this. Just need a few. Working on it…

yeah that’s what i thought too, but I was trying everything.
anyways feel free to edit on the Figma file, and if you found a solution please let me know

Looking like most examples online use a variant approach rather than the overlay.

Even the Figma help site uses a variant approach, but they don’t change the whole menu. They do a weirdo thing of each item is a variant set. With button closed and button open. Then when you mouse in/out, you are just swapping variables of the single item.

Definitely the overlay thing is failing because there is no easy way to tell the menu to close. And the buttons are not resetting state to allow the other link to work.

This one is hard. I think you might be better served with a different method.

I will let you know if I can pull it off though.

2 Likes

Gotta wrap for the night.

I’ll try to do some more tests this weekend. My gut is telling me the variants approach is the way to go. It really is about all I can find onliine for examples.

2 Likes

Yes, I tried it with Variants and it worked!
and it was much easier this way, thanks for help

Oh that is awesome!

I am so glad you stepped in and tried the variants and made it work. Great job!

I am tapping out on the overlay method. I worked at it this morning and made it work a lil better. But it would he costly to maintain and didn’t feel stable. I think there is good reason why everone does this with variants.

Always around if you ever need to talk things through.

2 Likes