Multi State on hover

Ask the community
,
1

Hi, I’m really new to using code and I’m on the struggle bus today.

I want to have a multi state box go from empty (state1 “blank”) to state 2 (OnHover1) when the mouse hovers over a button (servicesButton). Which is WORKING but i need the menu to stay visible when the cursor hovers on the state2 menu

Now Here is what I have- when I move off the serviceButton, the menu disappears. I’ve also tried to use onMouseOut when the cursor goes off the state2 box but then it remains visible when cursor pases over the servicesButton which is not what I want.
// The code in this file will load on every page of your site
$w . onReady ( function () {
$w ( “#servicesButton” ). onMouseIn (() => {
$w ( “#servicemenu” ). changeState ( “OnHover1” );
});
$w ( “#servicemenu” ). onMouseOut (() => {
$w ( “#servicemenu” ). changeState ( “blank” );
});
$w ( “#servicemenu” ). onMouseIn (() => {
$w ( “#servicemenu” ). changeState ( “OnHover1” );
});
$w ( “#servicesButton” ). onMouseOut (() => {
$w ( “#servicemenu” ). changeState ( “blank” );
});
});

any thoughts? this is a customer menu bar so I need to have the code in place to have the look that the client wants.

2

Why are you using a multi-state box for that?
It’ll be easier if you use a regular box.
Inside this parent box put 2 elements:

  1. The Services Button.

  2. A child box with the menu subcategories OR with a repeater (1 item per row) that will be bound to the subcategories data.
    Make the child box collapsed on load.

Add the onMouseIn and onMouseOut event handler to the parent box.
On mouse in expand the child box. On mouse out collapse the child box.