Streaming live at 10am (PST)

Change text in another area on hover


Hi folks-

Just looking for some help; I'd like to change the design of the site here, so that on hover over a given icon, the text below will be updated (and on click it will stay in that state):

(in this example, hovering over "cloud expertise" would change the highlighted text below).

Any help much appreciated!


Here is my public share link:


Try doing hover and affect different element. Make sure to watch the interactions tutorials to find out how to do this. Hope this helps. :wink:


Thanks Vladimir!

Is there a specific interactions tutorial you could point me to (if not I'll dig around)...?

Appreciate your help!


Here's a site:

Scroll until the monkey pops out. Then look at the settings displayed. Notice rather than applying scroll select hover for your effect. Hope this helps. :wink:


@VladimirVitaliyevich thanks for your help here-

I'm still having some trouble getting this to work; I can successfully get the default text to disappear on hover, but I need to swap in different text and am not sure how to do this; here is an invision mockup of what I'd like to accomplish (and there would be different text for each of the icons:

Here is my public share link:


It seems what you are trying to do can be done with tabs. I will have to take a closer look. :wink:


great, thanks @VladimirVitaliyevich!

@cyberdave or others who may have run into this challenge before, any help much appreciated!


Hi @ewoolery, thanks a lot for reaching out, I am sorry, but it seems the read-only link is not valid anymore, could you reshare that link?

I am happy to take a look :slightly_smiling:


@cyberdave sorry just saw your request; here is the read only link:

Thanks for your help, much appreciated!


@cyberdave any ideas here? Thanks for your help


Hi @ewoolery, I would probably use our tabs widget, and use a little custom code in the Footer to get the tabs to change on hover.

See an example I created:

Go ahead and clone this and then try to implement to your own site. Here is the custom code used in the footer:

  function() {
    $( this ).click();

I hope that gives you some ideas. You can style the tab links any way you want and then have the tab content area show the text/elements you want to show in each tab. Further, you can animate the tab elements using the tab trigger interaction.

closed #12

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.