Hover Effect code question

Ask the community
,
1

Hi, I’m trying to set a text and an image hidden when the page loads and shown when it gets hovered around the image. Right now, my code is

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

export function image2_mouseOut(event, $w) {
$w(“#image2”).hide(“fade”, fadeOptions)
//Add your code for this event here:
}

export function image2_mouseIn(event, $w) {
$w(“#image2”).show(“fade”, fadeOptions)
//Add your code for this event here:
}

But there’s a couple problems:

  1. It’s not hidden when the page loads.
  2. Once hovered, the hover effect doesn’t repeat.

I know I don’t have my text code in.
I’m planning to do that after I get the image part to work.
I’d really appreciate it if you provide me with the proper code with the text portion part!
Thanks.

2

Hi,
You can set the elements to be hidden on load using the properties panel :

As for the image to be seen when hovered- you should set a trigger that displays the image. If the image is already hidden, the onMouseIn event won’t be fired. You should set a different event, on an element that is not hidden , to display the image.

Best,
Tal.