Hover interaction repetition

Hello everyone,

I would need some help on a project I’m doing right now.

Basically what I want is a simple hover interaction that isn’t hard to do. It’s when I hover on one item an other item is going to appear in front of it.

For the moment that is quite simple but the problem is that I need to do quite a lot of those items. And for because I need to change a few details (title / color / …), I need to create a different class everytime and to recreate the interaction.

If I had just 10 to do I wouldn’t come asking here, but I will have probably over a 100 or more, so if I have to recreate the class and the interaction for each it’s gonna take quite a while.

I can’t share my project because it’s for some clients, but I made an example version of basically what I want : https://preview.webflow.com/preview/example-website-9ea7a4?preview=b0910fcf4f6b3798ca36a8b82dd77589

The first 2 buttons works like I want, my question is, how to “copy” it to the other. If I simply copy they will all display when I over one of it.

It might sound confusing but when you look at the example it should be understandable.

If anyone have a solution that would save me a lot of time !

Thanks guys !

Hey Colin

There’s a really simply way of doing this, which should stop your head from exploding :smile:

Sooooo…

  1. Set up your blocks & give the all “block appear” divs the same class.

  2. Set up your interaction as you normally would, but when creating the hover interaction select “limited to nested elements”. As your “block appear” divs are nested within a parent element this will ensure that only the “block appear” div that is contained within the specific parent element that is hovered over will appear.

  3. To add additional styling to individual “block appear” divs, just add a combo class (as below) to the ones you want to create different colors for etc.

You can then use the same interaction for all your hover blocks & you’ll only need to create an additional combo class for the blocks where you want to change colors & the like. Hope this helps!

2 Likes

Oh thank you so much !
I didn’t knew it was so easy !
That will save me hours of works ! Thanks a lot for the answer, that’s just perfect !

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