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

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

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.

1 Like

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?

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.

even with this correction it does not work

I duplicated my file so you can go see:
https://www.figma.com/file/MIfpkuVgcvy4FW4Qo2QReC/mouse-over-%2Fenter-%2Fleave-issu?type=design&node-id=0%3A1&mode=design&t=sZX3U5jEg7LWwUBU-1

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

yes it’s exactely this !

thank you very much it works!

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