Streaming live at 10am (PST)

Assign interaction to a class


#1

Let’s say I have three elements with a single class of “Parent”. Each of these three elements has a child with a class of “Child”. On the first “Parent” I create a hover interaction to fade “Child” in and out. This hover interaction does not apply to the second or third elements with the same parent/child class names. This is becoming exhaustively tedious to set up the SAME interaction for each one.

I could set up 1 of these parent/child elements -> create the interaction -> duplicate the element 2 times. But, I have separate unique interactions applied to these elements individually.

I could add custom code, but I shouldn’t have to given what Webflow promises and the relative simplicity of this interaction. In CSS I could just write:

.parent:hover .child { opacity:0; }

Maybe with a transition as well.

Am I missing something?


#3

If the child is a type of:

h1, h2, h3, h4, h5, h6, link, blockquote, bold, italic, figure, image, ul, ol, li, figcaption

You can use The Nested Children Selector Hack, avoiding the need for interactions. See:

Affect any element with a combo class from an Interaction


#4

You can also vote for a proper feature here https://wishlist.webflow.com/ideas/WEBFLOW-I-893 and here https://wishlist.webflow.com/ideas/WEBFLOW-I-315