# Changing Text Colour On Hover **URL:** \ **Category:** Elements\ **Created:** [June 24, 2025, 2:26pm UTC](https://forums.realmacsoftware.com/t/changing-text-colour-on-hover/48304 "2025-06-24T14:26:27Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![BrettHannam](https://avatars.discourse-cdn.com/v4/letter/b/858c86/32.png) [@BrettHannam](https://forums.realmacsoftware.com/u/BrettHannam)\ **Post date:** [June 24, 2025, 2:26pm UTC](https://forums.realmacsoftware.com/t/changing-text-colour-on-hover/48304/1 "2025-06-24T14:26:28Z")
Hi, 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? Thanks in advance. ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [June 24, 2025, 6:56pm UTC](https://forums.realmacsoftware.com/t/changing-text-colour-on-hover/48304/2 "2025-06-24T18:56:44Z")
You can do this by changing the item shown in the image below. ![CleanShot 2025-06-24 at 08.54.43@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/6/9/69ac55620ae877882f8f9356feb75ec683005a37.png) Just change it from Self to Parent then when the hover is over the parent it will also cause the hover effect for the SVG to appear. ---
**Author:** ![BrettHannam](https://avatars.discourse-cdn.com/v4/letter/b/858c86/32.png) [@BrettHannam](https://forums.realmacsoftware.com/u/BrettHannam)\ **Post date:** [June 24, 2025, 7:32pm UTC](https://forums.realmacsoftware.com/t/changing-text-colour-on-hover/48304/3 "2025-06-24T19:32:10Z")
Terrific - thank you. Is there an equivalent for text? ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [June 24, 2025, 8:15pm UTC](https://forums.realmacsoftware.com/t/changing-text-colour-on-hover/48304/4 "2025-06-24T20:15:25Z")
Unfortunately, there is not currently. It is something I have requested before as it would be very useful. ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [June 25, 2025, 10:27am UTC](https://forums.realmacsoftware.com/t/changing-text-colour-on-hover/48304/5 "2025-06-25T10:27:52Z")
Hi @BrettHannam 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. I’ve created an [example project, which you can open in Elements](elementsapp://downloadDocument/MYrd758utjyo) . In the project I’m using a Flex with an SVG and Text inside. The tailwind classes are: `group-hover/flex:text-green-700 transition-colors duration-500` ![CleanShot 2025-06-25 at 12.22.40@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/e/aeb8a8f7a16bbfc03006b2c6ffa5b0040a606e19.png) 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 🙂 ---
**Author:** ![BrettHannam](https://avatars.discourse-cdn.com/v4/letter/b/858c86/32.png) [@BrettHannam](https://forums.realmacsoftware.com/u/BrettHannam)\ **Post date:** [June 25, 2025, 10:56am UTC](https://forums.realmacsoftware.com/t/changing-text-colour-on-hover/48304/8 "2025-06-25T10:56:06Z")
That’s really helpful. Thank you very much for going to so much trouble in your reply. ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [June 25, 2025, 4:57pm UTC](https://forums.realmacsoftware.com/t/changing-text-colour-on-hover/48304/9 "2025-06-25T16:57:03Z")
This is good to know. I will start using this until we have support built into Elements.