Copy hover interaction to multiple elements in the same page

hey,
i’m trying to duplicate a hover interaction to multiple elements on the same page.

basically i want to copy the interaction from the pink box, to the blue box.
no matter what i do, it keeps pointing to the same pink box.

I’m sure some explanations are already written in the forum, but i couldn’t find anything relevant.
any help would be appreciated.

here is my link
https://preview.webflow.com/preview/porfolio-64daaa?preview=94a94bd6f73be56a06f992b819a8a45d

Your link is coming up broken, but it may be Webflow’s Fault - not yours (?).

Not too sure what your exact challenge is, but my method of successfully copying interactions for different elements was to duplicate the interaction and have it separately assigned to the different element(s).

Again, not sure if this will work, but…

Step 1. Build the interaction you want for pink box (ignore the blue box for now). Label it “pink box interaction”.

Step 2. Once your interaction is behaving the way you want for the pink box, duplicate the interaction. Rename the copied interaction “blue box interaction”.

Step 3. open up your new “blue box interaction”. Right click on the keyframes that define your interaction and select “change target”. You can now just scroll and click on the blue box to set the blue box as the new target.

Step 4. Make sure ALL the key frames are right-clicked and "change target"ed. This wires the new interaction to be exclusively for the blue box.

This technique worked really well for me. The main reason why I did this for my project was because if I assigned interactions to an entire class instead of the elements, the interaction only seamed to work when the mouse hovered over the original element I used to build the interaction with. What’s more, when I did hover my mouse over the original element, all elements with the class would move in unison… it looked pretty dumb. The above technique bypassed all that, and all the elements behave just fine.

Hope this helps.

1 Like