Hide and Show text when moving mouse on image

Ask the community
,
1

Hi everyone,

On my ‘About’ page, I have 4 pictures explaining the history of my project and my idea is that when someone goes on 1 of the picture, a small text would appear with a short explanation and disappear as soon as the mouse is off the image.

As you can see on the video, I managed to do so but when I put my mouse on the text that appeared on the picture, the text flickers…

This is the code:
export function image9_mouseIn ( event ) {
$w ( ‘#text85’ ). show ()
}

export function image9_mouseOut ( event ) {
$w ( ‘#text85’ ). hide ();

Pretty sure I need to do something here but don’t know what…

Would appreciate if someone can help me out on this!

Thank you!

2

Try to put the image and the text inside a box. Set the box size to be exactly as the image (the box can be transparent if you wish).
Then assign the mouseIn and mouseOut listeners to this container box.

3

I second this.

4

Thank you very much!