Change text in another area on hover

Design help Animations & Interactions
1

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!

-Eli

Here is my public share link: https://preview.webflow.com/preview/ds-wireframes-v5-7c4a6cb8a071a0dbc34953?preview=130b7272f5604106fe5042ef47fc32b5

2

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:

3

Thanks Vladimir!

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

Appreciate your help!

4

Here’s a site: http://interactions.webflow.com

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:

5

@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:

https://invis.io/VK75N1SG9#/155133211_Hover_Default

Here is my public share link: https://preview.webflow.com/preview/ds-wireframes-v5-7c4a6cb8a071a0dbc34953?preview=130b7272f5604106fe5042ef47fc32b5

6

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

7

great, thanks @VladimirVitaliyevich!

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

8

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? Share a read-only link | Webflow University

I am happy to take a look :slight_smile:

9

@cyberdave sorry just saw your request; here is the read only link:
https://preview.webflow.com/preview/ds-v8?preview=130b7272f5604106fe5042ef47fc32b5

Thanks for your help, much appreciated!

10

@cyberdave any ideas here? Thanks for your help

11

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: https://webflow.com/website/change-tabs-on-hover

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

<script>
$('.tab-link').hover(
  function() {
    $( this ).click();
  }
);
</script>

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.