Hoovering issue on html elements

Here’s a recording, I’m quite sure you’ll enjoy : https://share.getcloudapp.com/Wnur2yBX

I’m trying to have a dynamic svg in an html element. I want to change the svg when I hoover the html element.

I did a first attempt with an HTML element with a conditional state and I change the html code when hoovered. It’s working but when my hoovering is fast, the elements gets sticky (see here, first colomn : https://bug-icon-reusable.bubbleapps.io/version-test?debug_mode=true)

So I did another test, with a reusable element, with 2 html elements inside, and when I hoover, I hide one and show the other. As you’ll see in colomn 2, it’s working.

But when I had the reusable element in a repeating group, it’s not working anymore… EXCEPT IF (and it’s getting tricky) I manage to reproduce the first bug and then it’s working.

Can someone help me with this ?

Editor link : https://bubble.io/page?type=page&name=index&id=bug-icon-reusable&tab=tabs-1

If anyone as the same issue one day, I finaly managed to solve this by optimizing the code of my svgs

This topic was automatically closed after 70 days. New replies are no longer allowed.