Wix element comes on and off when I hover on it? - mouseevent

Question

I'm building a website using Wix.com and I'm trying to add a feature with code. I want a button to appear only when I hover over a document on the page. So far the button appears the way I want, but when I try to click on it, it keeps flickering so it's hard for me to click it.
I'm pretty new to this so I just tried basic debugging But still I don't know why this is happening. Also, I couldn't find much help from Wix forum
here are the code and a screenshot from the site (code examples is the button)
let rollLeft = {
"duration": 200,
"direction": "left"
};
let rollRight = {
"duration": 200,
"direction": "right"
};
$w.onReady(function () {
//TODO: write your page related code here...
});
export function document15_mouseIn(event) {
//Add your code for this event here:
if(!$w('#button1').isVisible)
{
$w('#button1').show("roll", rollLeft);
}
}
export function document15_mouseOut(event) {
//Add your code for this event here:
if($w('#button1').isVisible)
{
$w('#button1').hide("roll", rollRight);
}
}

Answer 1

Without seeing it in action this is a bit of a guess, but it looks like when you move to the button, you leave the pdf, causing the button to hide.
I can think of at least two ways to get around this:
Add a delay to the effect options to give a user enough time to click the button before it starts to disappear.
Add a transparent box beneath the file icon and the button. Use that box to trigger the show and the hide on hover, instead of the file icon. That way the hide won't trigger when the user tries to click the button.