Streaming live at 10am (PST)

Problem with interactions with overlapping elements


#1

Hello, everyone!

I have been trying to implement this little browser for my company’s plugins. It’s my first time using the IX 2.0 and I am a bit lost. I was able to figure out most of the interactions but I encountered a problem that I just can’t figure out!

I made a video demoing the issue: https://cl.ly/7559b1b1d324

As you can see, everything works fine. The side welcome text hides and shows the product whenever I hover any product. Except when I hover from the pink circle to the green one. When I go around with my mouse without overlapping it works fine like the rest but when I go from circle to circle like that the welcome text stays on top.

I don’t know what to do! :frowning: - thank you so much for your time!

My share link: https://preview.webflow.com/preview/soundemote?utm_source=soundemote&preview=0c3b133ee6e57eaf16cb9532e3614989


#2

Hey @Alejandro_Hernandez

The share link is not longer working. Please try sharing it again for the community. Thanks in advance.


#3

Thank you for letting me know Matthew! Not sure how that happened but here it is again: https://preview.webflow.com/preview/soundemote?utm_source=soundemote&preview=aa3b27ff6e39a6a573ff4d6ea043adfc

I am still struggling with this, by the way :frowning: - I tried all night but could not figure out any way.

Thanks for your time!


#4

Hey @Alejandro_Hernandez,

I was trying to figure out whats causing the bug, but not find it yet. But one thing that I found really hard to maintain is the fact that you have several different interactions to do the same thing: hiding the welcome-wrapper. The initial display of the welcome-wrapperalso is display: flexand on the interactions on hover out you are setting it to display: block.

I think you first should create a individual interaction to show/hide the welcome-wrapperand apply it on hover in/out on every element, and apply the other interactions on them in parallel, the same way you used the Bright on Hover together with the Show Pretty.


#5

It never even crossed my mind doing it individually! haha. Thank you so much for taking time to look into this. I am going to apply this and let you know the results!


#6

@gilson Hey, Gilson!

I changed and added the show welcome div on hover like you said:

https://preview.webflow.com/preview/soundemote?utm_source=soundemote&preview=aa3b27ff6e39a6a573ff4d6ea043adfc

I still have the same issue though. Now it seems to happen randomly. Sometimes it hides on time, sometimes it just stays there.

I made a video: https://cl.ly/2d5ea7ca3d6d