Mouse In Mouse Out

Ask the community
,
1

I am trying to get a container box to disappear when a mouse rolls over it and a different box to appear instead. (I know you can do this with hover boxes but with the hover box it won’t let me change the opacity of the image on hover and put text over it. The opacity only shows when the mouse is around the text on the image not on the whole).

This is what I have tried but can’t get it to work, there is also a parsing error saying Export may only show at the top level, there is nothing above the code on this page:

$w.onReady( function () {
export function currentDefault_mouseIn(event) {
//Add your code for this event here:
$w( ‘#currentDefault’ ).hide();
$w( ‘#currentMouse’ ).show()();
}

export function currentMouse_mouseOut(event) {
//Add your code for this event here:
$w( ‘#currentDefault’ ).show();
$w( ‘#currentMouse’ ).hide()();
}
});

Would really appreciate any help! Thank you.

2 
$w.onReady(function () {
});

export function currentDefault_mouseIn(event) {
    $w('#currentDefault').hide();
    $w('#currentMouse').show();
}

export function currentMouse_mouseOut(event) {
    $w('#currentDefault').show();
    $w('#currentMouse').hide();
}
3

Hey, thanks for your message, it still isn’t working. Both boxes show on the website and nothing happens to either as I move the mouse. I also hid the currentMouse on load and it’s didn’t show when the mouse went over currentDefault. You don’t know what else I could try do you?

4

@ahebden

Make sure that you put the onMouse event in the properties panel for each element needed.
https://support.wix.com/en/article/corvid-working-with-the-properties-panel
https://support.wix.com/en/article/corvid-reacting-to-user-actions-using-events

Like this.

1306×706 31.1 KB

5

Yay it works!! Thank you so much!