Interaction: How can I change a css style of a child with hovering the parent?

Design help Animations & Interactions
1

Hey guys,

I was searching and trying for ages but I cannot figure it out.
(I have watched all tutorials, university material etc.)

Here is my issue/question:

I have a Mouse Hover Interaction of the Parent Element. The Interaction should change a css style of a child element – in my case I want to change the text-shadow property of the child.

The current state can be seen here (scroll down to these 6 big buttons):
https://somathera.webflow.io/

Can you give me a tip how I can archive that?

Many thanks in advance!
Manuel

2

Hi @ManuelE

Try adding this to your page:

<style>
.a-startseite-contentteaser:hover .h3-startseite-contentteaser {
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>
3

Hey @avivtech,

great, thanks! Works like a breeze. I was thinking I could include it somehow in the interaction … man, I´m so blown away from Webflow (it´s basically my first project in Webflow and I f***ing LOVE IT!) - so that I forgot that I can still simply add custom css - haha!

Cheers!
Manuel

1 Like
4

I know exactly how you feel :webflow_heart:

Not yet… hopefuly soon…