Does anyone know how to do this interactive element?

Can you show me the whole page’s code ?

// For full API documentation, including code examples, visit Velo API Reference - Wix.com

$w.onReady( function () {
$w(‘#box1’).hide();
$w(‘#box2’).hide();
$w(‘#box3’).show();

 } ); 

export function hoverBox3_mouseIn(event) {
$w(‘#box1’).hide();
$w(‘#box2’).hide();
$w(‘#box3’).show();
}

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();
}

Are those hoverBox and box numbers corresponding to the position on the page, so 1 would be left, 2 the middle and 3 the right, as that would make it easier.

It looks to me that it is not and so I will go with the code being as with 1-Left, 2-Middle, 3-Right

As for the beginning of your code, are you wanting to have the left hand side always showing first when the page loads unless the user moves the mouse over boxes 2 or 3.

Then simply set up the container box that all the text for 2 and the container box that all the text for 3 is in to ‘hidden on load’ in the properties panel for each of the container boxes and simply just have the container box for 1 on show as it is.

Then you do not need the code underneath your onReady function for the page.

Then simply have the onMouseIn function for hoverBox 2 with the code underneath set for box 1 and 3 to be hidden and for box 2 to be shown.

Plus the same for hoverBox 3, simply have the onMouseIn function for it with the code underneath set for box 1 and 2 to be hidden and for box 3 to be shown.

Also, with the middle box, is there a reason why you have the Public Relations changing from one line to two lines, it doesn’t do that in the video so you might need to make that text box slightly bigger so that it can accomodate it all on the one line without having to split it over the two lines instead.

Also, have you got a background of any of your container boxes set to black, as for a start you can have a clear background as you can use the black background of the strip that this is placed on.

Plus, also check that the container box is at the back of all the elements in it and not at the front of it and so covering everything like a colour overlay when it is shown.

Thank you! Yes I have the container boxes set as back of the elements and no background color.

I did everything above and its functioning the same way - not sure why it isn’t showing with the 2nd and 3rd boxes when I hover over the boxes. I am going to have to keep looking into it

Really good set of resources