Streaming live at 10am (PST)

Change text in another area on hover


#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):
https://www.evernote.com/l/AAQWHl72WcVB5Lr4QlI9HVo4pQu0lcsPHmk

(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? http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link

I am happy to take a look :slightly_smiling:


#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.