How to hide a box under one extra condition

Hi there,

I’m creating a mega menu using a box and have succeeded in writing a simple function that shows the box when I mouse over the relevant button.

I have also figured out how to hide the box when I mouse out from the button.

This is where I’ve got stuck. I would like the menu to disappear when I mouse out from the button, unless I mouse into the box. So in other words, the box only disappears if I mouse out from the button into some nebulous direction, other box itself.

I guess that means I need to write some kind of simple conditional statement that says the box should only disappear when I mouse out from the button unless I mouse into the box, but I don’t know how, and despite my best attempt at google searching, i wasn’t able to figure out how.

I’d appreciate it if someone could help me!

Please show your already working (not working ) CODE.
Also a screenshot of your Mega-Menu and all used elements would be very useful. Elaborate some more informations.

Hell @russian-dima I have attached a screenshot showing a mock-up of the button and box arrangement I am after. The box appears when I hover over the button. I achieve this by setting the box to ‘hidden’ by default, then adding this code to masterPage.js

export function button3_mouseIn ( event ) {
$w ( “#box1” ). show ();
}

I then get the box to hide when the mouse leaves the button using this code.

export function button3_mouseOut ( event ) {
$w ( “#box1” ). hide ();
}

As I wrote. The issue is what I really want to happen is the box hides when I am no longer mousing over the button UNLESS I have moused into the box area.

I did try to add a show command when the mouse goes into the box, but that seems to get overridden by the command set up hide the box when you mouse out of the button.

This is why I’m wondering if the solution is some kind of UNLESS conditional statement, i.e. hide the box when you mouse out from the button UNLESS you mouse into the box.

@bains-ravi
Instead of placin your hide-event onto the button → why not placing your mouse-out-event onto the box itself?

You want to close the box, when you leave the box, right?

exportfunction box1_mouseOut ( event ){
$w ( “#box1” ). hide ();}