Help: Making elements hide using mouseout

Ask the community
,
1

Hi,

I am trying to create a custom menu bar with images
(see https://farbabymamahome.wixsite.com/mysite) )

The aim is that when a mouse hovers over the buttons (button 7) that are on the header, the categories section will pop up with different categories. I have got the bar to open fine using the code:

export function button7_onmouseIn(event) {
$w( ‘#box2’ ).show();
$w( ‘#button14’ ).show();
$w( ‘#button15’ ).show();
$w( ‘#button16’ ).show();
$w( ‘#button17’ ).show();
$w( ‘#button18’ ).show();
$w( ‘#button19’ ).show();
$w( ‘#line9’ ).show();
$w( ‘#image7’ ).show();
$w( ‘#image8’ ).show();
$w( ‘#image9’ ).show();
}

However I cannot get the mouseout feature to work. I am wanting for the categories section to disappear when the mouse is moved out of ‘box2’ (the background white box in the categories section). Note that all of this is in the header as I want it to appear on all the pages.

I am using this code (which is not working) for the mouse out feature:
exportfunction box2_onmouseOut(event) {
$w( ’ #box2 ’ ).hide();
$w( ’ #button14 ’ ).hide();
$w( ’ #button15 ’ ).hide();
$w( ’ #button16 ’ ).hide();
$w( ’ #button17 ’ ).hide();
$w( ’ #button18 ’ ).hide();
$w( ’ #button19 ’ ).hide();
$w( ’ #line9 ’ ).hide();
$w( ’ #image7 ’ ).hide();
$w( ’ #image8 ’ ).hide();
$w( ’ #image9 ’ ).hide();
}

Any help will be greatly appreciated!

2

Your ERROR is here —> export function box2_mouseOut(event) {}

Not like this …

exportfunction box2_onmouseOut(event) {

This example works like a charm …

export function button1_mouseIn(event) {$w('#box1').show();}
export function button1_mouseOut(event) {$w('#box1').hide();}

export function button2_mouseIn(event){$w('#box2').show();}
export function button2_mouseOut(event) {$w('#box2').hide();}

export function button3_mouseIn(event) {$w('#box3').show();}
export function button3_mouseOut(event) {$w('#box3').hide();}

Live-example, look here …
https://russian-dima.wixsite.com/meinewebsite/blank-8

3

Hi! Thank you so much for replying. I have used the code you gave me and it’s still not working: https://farbabymamahome.wixsite.com/mysite/

This is the code I am using:
export function box2_mouseOut(event) {
$w( ‘#box2’ ).hide();
$w( ‘#button14’ ).hide();
$w( ‘#button15’ ).hide();
$w( ‘#button16’ ).hide();
$w( ‘#button17’ ).hide();
$w( ‘#button18’ ).hide();
$w( ‘#button19’ ).hide();
$w( ‘#line9’ ).hide();
$w( ‘#image7’ ).hide();
$w( ‘#image8’ ).hide();
$w( ‘#image9’ ).hide();
$w( ‘#vectorImage1’ ).hide();
}

4

Attention!!! Check the connection between code and the page!
Delete old connection, and make a new one.
Be careful that it does not create a connection with a ----> “_1” <—wrong!
It has to be ----> without ----> “_1” <----- right!

1062×668 70.6 KB

CHECK ALL YOUR ELEMENTS AND ALL CONNECTIONS FROM PAGE TO CODE!