Share Posted October 26, 2017 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 More sharing options...
Share Posted October 26, 2017 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 4 Link to comment Share on other sites More sharing options...
Author Share Posted October 26, 2017 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 More sharing options...
Share Posted October 26, 2017 Where is the problem? 4 Link to comment Share on other sites More sharing options...
Share Posted October 26, 2017 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 4 Link to comment Share on other sites More sharing options...
Author Share Posted October 26, 2017 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 More sharing options...
Share Posted October 26, 2017 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! 4 Link to comment Share on other sites More sharing options...
Author Share Posted October 26, 2017 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 More sharing options...
Author Share Posted October 27, 2017 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 More sharing options...
Author Share Posted October 27, 2017 Btw guys, I have fixed this problem to get around Framer API. Thanks all! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now