Skip to main content
July 3, 2023
Question

How fix this mouse over bug ? (interaction repeat in reverse order without mouse moving)

  • July 3, 2023
  • 8 replies
  • 805 views

I have a list of four text items which on mouseover displays an image and underlines the text.
On the prototype, if I hover over all four in a row, when the mouse comes out, it repeats the interaction upside down.
How to get rid of this bug?

I can’t add an attachment to illustrate how I’m a new user, sorry.
Thanks for your help 🙏

This topic has been closed for replies.

8 replies

fernandolins_cs
July 3, 2023

Hi. By “upside down” do you mean in reverse? This is expected behavior for the “while hovering” interaction trigger. If you want to avoid that then you should use “Mouse Enter” to the hover state and “Mouse Leave” back to the original state.

July 4, 2023

Oh ok, I didn’t know that was the expected behavior.
I chose this one because if I do mouse enter/mouse leave, when the mouse is on the object for several seconds it blinks. this doesn’t stay fixed for how long the hover takes before returning to the original state when the mouse exits.

Can you help fix this?

fernandolins_cs
July 5, 2023

It’s hard to debug the interaction without seeing how it is actually setup in the file, but you need to check if the interaction is not directly on the text, but on a frame or auto-layout area around it, so that the mouse doesn’t trigger the events in between the letters of your text.

If you set a frame with a fill and put the text in, and then add the interaction to the frame instead of the text it should work.

July 6, 2023
Avokadomos
Active Member
July 6, 2023

I made a test page in your design file. Is that how you want it to behave?

July 6, 2023

yes it’s exactely this !

July 6, 2023

thank you very much it works!

Stan_de_Wijs
November 30, 2023

Hey everybody! I’m not sure what solution Avokadomos had because the Figma link isn’t working anymore.

From what I found, it looks like the behavior as described by Chloe happens when you apply an interaction directly to an instance rather than to the component that contains variables which creates some kind of a partial loop.

Hope this helps someone out there 😊