mouseOut hide function unreliable and slow

Ask the community
, ,
1

Question:
On my site [working url https://kalynblazak.wixsite.com/website-1/support] I am trying to create a hover-over effect, where if the user hovers over a photo, a text box which gives more information appears on top of the picture, and when the user mouses off, the text box disappears:

screen-capture-ezgif.com-video-to-gif-converter

With my current code, the mouseIn and mouseOut functions don’t always work–particularly if the mouse moves too quickly. Also, on the mouseOut hide when it does work, there is a flicker of the image as it fades.

$w(“#exhibit1Description”).hide();

let fadeOptions = {
“duration”: 250,
“delay”: 0
};

export function exhibit1Picture_mouseIn(event) {
$w(“#exhibit1Description”).show(“fade”, fadeOptions);
}

export function exhibit1Picture_mouseOut(event) {
$w(“#exhibit1Description”).hide(“fade”, fadeOptions);
}

Product:
Wix Editor

What have you already tried:
I have tried changing the mouseOut event to exhibit1Description as well, but it behaves exactly the same way. I have also messed with which layer each of these elements are in but that hasn’t made a difference either.

2

I have learned that using the Wix Editor’s “add hover interaction” menu instead of using Velo code creates a smoother, more reliable animation. If someone sees a reason for the choppy, less responsible result with my code, I’d love to understand why still, though.

3

I have exactly the same using the show/hide function. It is not just with images, basically with anything you put a hide/show function on.
I use it for hover effects on my buttons and it is really annoying because I can’t use the wix hover animation since this isn’t custom enough for me.
Have you got a fix for this yet?