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.

12

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