Mouse in/out glitch

Mouse in feature often remains active even when the mouse is out of the designated area.

They work properly sometimes, but most of the time they do not. When hovering over the image the blue filter (hover#) and the text (text#) are supposed to appear, and then hide when not hovered over.

Screencast:
https://www.screencast.com/t/TtzYJVAIbfh

Code:
export function hover1_mouseOut(event) {
$w(‘#image6’).show();
$w(‘#hover1’).hide();
$w(‘#text35’).hide();
}

export function image6_mouseIn(event) {
$w(‘#image6’).show();
$w(‘#hover1’).show();
$w(‘#text35’).show();
}

export function image5_mouseIn1(event) {
$w(‘#image5’).show();
$w(‘#hover2’).show();
$w(‘#text36’).show();
}

export function hover2_mouseOut_1(event) {
$w(‘#image5’).show();
$w(‘#hover2’).hide();
$w(‘#text36’).hide();
}

export function image8_mouseIn(event, $w) {
$w(‘#image8’).show();
$w(‘#hover3’).show();
$w(‘#text38’).show();
}

export function hover3_mouseOut(event, $w) {
$w(‘#image8’).show();
$w(‘#hover3’).hide();
$w(‘#text38’).hide();
}

Hello David,

The code here is unnecessary. You can use a hover box element to achieve the same effect.

Ido, they want the hexagonal shape kept. I already tried with the hover box element and I cannot get a hexagonal shape. Unless I’m missing something?

Hello David,
Please share the site/editor url - I’d like to see the full implementation of the hexagonal shape on your end. And we’ll see how we can improve it or to find a better solution.
Thanks.

Alexander,

This is the site URL: https://peter1herrera.wixsite.com/mysite-1

I am not sure how to share the editor URL unless it’s: https://editor.wix.com/html/editor/web/renderer/edit/d800e252-91a5-4d27-a98e-9030afe74d4d?metaSiteId=ff02662e-7c67-4a66-b370-9569b7e294eb&editorSessionId=05D5B603-4C95-4D2F-8AE5-CAB5CD284C39

Hello David,
The issue here is related to “rotated” components, once component has been rotated you can see that frame has been increased too: screenshot - 2018-02-08_1519
And once the frames had been increased you got a mixed elements with each other - I mean when you mouseIn one component, at the same time you mouseIn at least on more, and there are areas that with one mouseIn event you can affect 4 components.
Suggest to use the "hover box"es or to redesign the position between affected elements.

Thanks.