how do you affect children on hover?

[yotamguttman]

I was wondering how I can modify child elements of a button on hover.

in this example, the SVG sitting inside an html element, inside a button element. the button has an hover state configured, it changes bg colour and colour, which is perfect. but in the screenshot, you can see that I''ve added tag to the child (the svg icon), with a rotate value as well as a transition effect, and I'd like this element to transform upon its parent's (the button) hover state.

but the only element I can influence its hover state is the parent, the button itself, which makes since. but how do I access children elements from the hover state of a parent?

[kof]

use css variables, set the value on hover on the parent, use it in any child

[yotamguttman]

but if I apply 'rotate: 45deg' on the parent (button), on hover, the button will turn. or I guess I didn't completely understand you?

[yotamguttman]

I've tried setting a token to the parent and giving it the rotate value on hover. the whole button turned. so I deleted the token from the parent and put it on the icon inside. this worked but it only rotates when I hover on the little icon itself and not the entire button

[yotamguttman]

https://www.youtube.com/watch?v=rg49mmDvdlE

I found this tutorial. thanks! it's well made and the instructor is great! answered all my questions.