In Elements, I am trying to create a card that contains an SVG, a heading and a piece of body text. I want each element of the card to change colour when the cursor hovers over the card. (ie. the card background changes from grey to green and the text and SVG change from black to white).
I can make the container background change on hover, but the SVG will only change when the cursor is over it and I cannot find a way to change the text on hover. (I think this is possible using a CSS class, but cannot find a worked example).
Is there a way to achieve this easily? Or even with difficulty?
As @handshaper says, there is no built in way to do this at the moment. However, you can use a couple of tailwind classes on the Text component to achieve this.
The magic is in the group-hover/flex modifier. Every built in component has a named “group” class applied, so you can target it in this way. If you’re not sure how this works, we can get @elementsbot to explain how group modifies in Tailwind works
