Can be seen in this video from 18 seconds - 23 seconds.
Hi there Leigha,
You made me feel useful for the first time, the process is simple:
What you need to do is to create the title paragraphs, all that stuff and group them in a box.
After that you hide the 3 boxes in the onReady event using $w(‘#box’).hide (replace #box by your actual box ID and do the same thing for the 2 other boxes).
Now, you need to put all of the boxes in the spot that they need to show in.
For the last part, take the hover element (button, text, image, can be anything) and add a mouseIn function to it using the property panel. What you need to put in the mouseIn function is as follows :
$w('#box1').show()
$w('#box2').hide()
$w('#box3').hide()
This code is for to show the first box, all you need to do is to switch between hide and show depending on what you want.
Hope that made actual sense (I don’t think it did). But I am here if you need more explanation.
You need to add the semicolon at the end of each line too.
$w(‘#box1’).show();
Have a look at the API reference for it too as that will be a good help.
https://www.wix.com/corvid/reference/$w.HiddenMixin.html
Also, a Wix example with code shown at the bottom of the page.
https://www.wix.com/corvid/example/hide-and-show-elements
Finally, just to add to above, onMouseIn and onMouseOut is fine on desktop, however remember that it will not work on mobile devices.
So, you can either simply do it all as onClick events instead, or the better way of keeping the onMouseIn option in the desktop version and only having the mobile version as onClick instead by using formfactor.
onMouse API reference.
https://www.wix.com/corvid/reference/$w.Element.html#onMouseIn
Form Factor API reference for only showing on mobile with tutorial too.
https://www.wix.com/corvid/reference/wix-window.html#formFactor
https://support.wix.com/en/article/corvid-tutorial-displaying-elements-in-mobile-only
Yea I’m a beginner coder so I don’t pay attention to my codes, but it works for me even without using semicolon; they’re just decorative to my perspective.
Thank you so much this is very helpful - I am going to attempt it today and may reach out for some more help!
Thank you for the resources these are helpful! I am going to try it today
I am having some trouble - I am pretty novice at this. I understand the mouse in section but not the one prior to that - could you clarify?
Ok, so you need to create boxes with the content (insert a box) then you hide them simply in the onReady event (in the page’s code) using the same code in the mouseIn except you make everything hide. And you can add effects to the hiding and showing if you’d like 
Got that worked out thank you! Assuming I am doing something wrong following that since the hover isn’t changing the box content.
$w.onReady( function () {
$w(‘#box1’).hide();
$w(‘#box2’).hide();
$w(‘#box3’).hide();
$w("#box3").onMouseIn( (event) => {
$w('#box1').hide();
$w('#box2').hide();
$w('#box3').show();
$w("#box2").onMouseIn( (event) => {
$w('#box1').hide();
$w('#box2').show();
$w('#box3').hide();
You need to go to the button’s property pannel and click on the mouseIn and add it then you tyoe the code in.
Thank you - that worked! It’f functioning for the first hover but not for the following two I am playing around with it now
Make sure the Box IDs match
I think I have them matched up its just showing black in the space (same as the background) when I hover
export function hoverBox2_mouseIn(event) {
$w(‘#box1’).hide();
$w(‘#box2’).show();
$w(‘#box3’).hide();
}
export function hoverBox1_mouseIn(event) {
$w(‘#box1’).show();
$w(‘#box2’).hide();
$w(‘#box3’).hide();
}
Note that for some instances with show and hide that as you are hiding boxes 1, 2 and 3 in your onReady function at the start, then you don’t need to have them again in the onMouseIn events.
Then you only need to add the box that you are wanting to show underneath the onMouseIn function call if you didn’t want any others to appear.
However, with this option that you are asking about in your video above, then you need to use the repeated hide() calls so that they don’t appear when another box is shown as well.
As for each box, have you got all the elements that are shown within each black box attached to the box itself, so that they are all contained within the box?
https://support.wix.com/en/article/attaching-elements-to-a-box
https://support.wix.com/en/article/adding-a-container-box
No, no. Or else they’ll all show at the same time and cover each other.
Plus, remember that when you use the onMouse function, then you can do a onMouseOut call too so that it hides all the boxes again.
Remember that the user won’t always go to another box so you might want something to happen if the user doesn’t hover over another box and simply moves elsewhere, like the shown box being set to hide again.
Why use 6 functions when you can use only 3, eh ?
And note in the video, even if the cursor moves somewhere else, the box doesn’t go away.
Yep why not, websites can have many element functions on them, all depends on how many you want to add and you actually need on your website. All about what the customer or client wants.
The same with giving out here more examples or suggestions than the forum poster is actually asking for.
It not only helps them, it also gives them ideas and suggestions on how to proceed further with their website or how to do it somewhere else on their website.
The more they know, the less that they have to keep coming back to the forum asking for help and holding them back, or putting them off of doing more and giving up, until somebody provides them a solution which does not always happen with this forum.
That is true; although I’m a beginner at coding, I wouldn’t have been able to start coding if this forum wasn’t here.
So the elements are all attached to the box and I have the code that is there and this is what is happening - Can’t figure out where its gone wrong besides not having the mouse out function https://lmiceliva.wixsite.com/mysite-5