How to apply hover state given a parent className?

[moroshko]

Say a design system has a <Button> component that has its own hover style.
This button is placed inside an arbitrary container, and I'd like the button to have its hover effect whenever the user hovers on this container.
How could I achieve this?

CodeSandbox

[michaeltaranto]

Hey Misha, not that this is a vanilla-extract specific solution, but what are your thoughts on making that container a label element and associating it with the button via an id?

From memory, hovering a label triggers the hover state for the associated form element.

[moroshko]

Thanks Mike, this is a great solution!

[graup]

Wow, TIL! For @moroshko 's purposes, you don't even need an id, you can just put the button inside the label element.