Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
venn

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

Recommended Posts

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?

Link to comment
Share on other sites

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

 

  • Like 4
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Where is the problem?

  • Like 4
Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

 

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?

 

Link to comment
Share on other sites

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! :)

  • Like 4
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

13 hours ago, Sahil said:

Where is the problem?

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

Link to comment
Share on other sites

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

 

Thanks all!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×