Evens mouseIn&mouseout Hide/Show element issue

Ask the community
,
1

Hi,
My site is:
https://tomamosu.wixsite.com/dogs
I need to get it to disappear once you hover it with the mouse. When the mouse is not on the picture, the picture should be displayed on the page.
I added wix code to dog picture in home page (#Dog01):
export function Dog01_mouseIn(event) {
$w(‘#Dog01’).hide(“fade”);
}
export function Dog01_mouseOut(event) {
$w(‘#Dog01’).show()
}
But after I move the mouse from the picture, the picture does not reappear, should be displayed on the page, please advise.

Video:
https://www.screencast.com/t/rrsf9PMpbSII

#mouseIn
#mouseout

2

Hi Tamara ,

In fact, when you mouse in and hide the image, mouse out will not work, because the image is already hidden. So, what you can do is to place a box infront of the image with opacity = 0 so you can see the image through the box, then use mouse in/out for the box to hide/show the image.

Hope this helps!
Best,

Mustafa

3

Thanks Mustafa! Can you help in writing the code please, how does it look in practice?

4

Hi Tamara,

You can do exactly as Mustafa suggested and keep your code, except changing the element that triggers the event from #Dog01 to the transparent box.

like so

export function box1_mouseIn(event) {
$w('#Dog01').hide("fade");
}
export function box1_mouseOut(event) {
$w('#Dog01').show()
}

Keep in mind that ‘box1’ is an example for the Transparent Box element id, which you can set in the element’s properties panel

All the best,

-Lior

5

Hi Tamara:

You may need to have a transparent second element that exists underneath the dog picture. When you hide an element the mouseout will not fire. You need something else to fire instead. So if you have a circle the same size and call it #noDog and make it transparent you could do something like this:

export function box1_mouseIn(event) {
    $w('#Dog01').hide("fade")
    .then(() = > {
        $w('#noDog').show();
    });
} 

export function noDog_mouseOut(event) {
    $w('#noDog').hide()
    .then(() => {
        $w('#Dog01').show();
    });
}

Steve