Shape doesn`t apply function

$w.onReady(function () {
//TODO: write your page related code here…
$w(“#kontakti”).show();
$w(“#jaunumi”).hide();
$w(“#koncerti”).hide();
$w(“#mesparsevi”).hide();
$w(“#anete”).onMouseIn(()=>

{
$w(“#anete”).show(“SlideIn”);
}

);

});

I have made shape anete, which I want to slide in, when the onMouseIn events occurs. But nothing happens. Did I made mistake somewhere?

Hi! You want to call “show” method when onMouseIn occurs on this item. But how can it happen, if this shape is hidden? When it’s hidden, no events can be thrown. You shgould bind this event to smth else

Hi, Mikhail! I just want to add mouse event to shape, that already exists on the page. I want to animate the shape, when visitors hover the shape. Did I wrote wrong code?

When page is loaded, shape is displayed or hidden?

$w.onReady(function () {
//TODO: write your page related code here…
$w(“#kontakti”).show();
$w(“#jaunumi”).hide();
$w(“#koncerti”).hide();
$w(“#mesparsevi”).hide();
$w(“#anete”).onMouseIn(()=>

{
$w(“#anete”).hide(“FadeOut”);
}

);
$w(“#anete”).onMouseOut(()=>

{
$w(“#anete”).show(“FadeIn”);
}

);

});

So I made new code, just changed the code a bit, now onMouseIn event occurs, but it doesnt work for onMouseOut

Element is showed , when the page loads

With your latest code, onMouseOut can’t be executed.

When you do mouse hover on element, hide() method is called. After this - element is not visible and onMouseOut event can’t be thrown. That’s why it’s not executed and you don’t see show() method executed

The only way to achive what you want (with current requirements) - create transparent image on stage and bind onMouseIn / onMouseOut to this

I mean this:

$w("#transparent_image").onMouseIn(()=>
{
	$w("#anete").hide("FadeOut");
}
);
$w("#transparent_image").onMouseOut(()=>
{
	$w("#anete").show("FadeIn");
}

Thanks, it means, that if the element is hidden, you cannot add any events to it?

yes, sure
It’s actually not on stage, no events will work