How do I hover on elementB that is only revealed when I hover on elementB?

[venn 23 Likes (Newbie)]

I have more of a simple programming question that I can't quite figure out.

 

I have a sidebar that will expand and collapse on hover.

And within the sidebar I have a few menu items that have hover states.

 

What I want to do is to hover on the sidebar, it gets expanded and the menu items get revealed and as a user I can hover on the menu items.

However the problem is that, when my mouse cursor moves to the menu items, my sidebar will trigger mouseOut event and this makes the sidebar collapses.

 

How can I hover on my sidebar and also hover on my menu items that are inside the sidebar at the same time?

[Sahil 2,541 Likes (Superhero)]

If the sidebar contains the target element, then it shouldn't trigger mouseout. A demo would help.

 

See the Pen qPeJEq by Sahil89 (@Sahil89) on CodePen

 

[venn 23 Likes (Newbie)]

2 hours ago, Sahil said:

If the sidebar contains the target element, then it shouldn't trigger mouseout. A demo would help.

 

See the Pen qPeJEq by Sahil89 (@Sahil89) on CodePen

 

Thanks, this example perfectly demonstrate my problem.

[Sahil 2,541 Likes (Superhero)]

Where is the problem?

[Jonathan 5,176 Likes (Superhero)]

Hello @venn
 

This would seem more of a question on javascript event binding use, which really isn't a GSAP API related question.

 

Since there is a number of things you can do but that depends on the code you already have, so we would need to see some code for context. Can you please create limited codepen demo example so we can see what you have tried or the code you have in context.

 

 

Thanks

[venn 23 Likes (Newbie)]

 

See the Pen JOPNQr by vennsoh (@vennsoh) on CodePen

 

I have created a pen on this using pure javascript.

I did a console.log to see when mouseout and mouseover is called. Apparently when you mouseover on "slide" element in my example, it will fire mouseout and mouseover on "container". I thought it shouldn't fire mouseover/out again on "container" since your cursor is already on top of it?

 

[Jonathan 5,176 Likes (Superhero)]

Hello @venn

 

This happens due to the nature of the two mouse events you are using .. mouseover and mouseout. Both mouseover and mouseout will trigger event bubbling down the DOM to its children. That is why you see it (#container) firing again when you enter its child (.slide) with your mouse.

 

To get around this you can either keep using mouseover and mouseout and use event.stopPropigation(). Or the better way is to just use mouseenter and mouseleave. So instead use mouseenter instead of mouseover. And use mouseleave instead of mouseout.

 

The below example uses mouseenter and mouseleave.  And when you look in the console, you can see it only fires once:

 

See the Pen rYBwbd?editors=0011 by jonathan (@jonathan) on CodePen

 

Happy Tweening!

[venn 23 Likes (Newbie)]

Thanks Jonathan. Your example works particularly well. But currently I am using Framer.js + GSAP.

And in Framer there isn't mouseenter or mouseleave but only API for mouseover and mouseout.

 

I wonder if that is the case, how do I use event.propagation() to solve this?

[venn 23 Likes (Newbie)]

13 hours ago, Sahil said:

Where is the problem?

Visually it looks correct, but there is a problem with the event propagation deep under.

[venn 23 Likes (Newbie)]

Btw guys, I have fixed this problem to get around Framer API.

 

Thanks all!