# I want the background in each row to change color when hovering

**URL:** <https://forum.readymag.com/t/i-want-the-background-in-each-row-to-change-color-when-hovering/3185>\
**Category:** Uncategorized\
**Created:** [July 1, 2024, 9:39pm UTC](https://forum.readymag.com/t/i-want-the-background-in-each-row-to-change-color-when-hovering/3185 "2024-07-01T21:39:04Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Leeam\_Levy](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/leeam_levy/32/2189_2.png) [@Leeam\_Levy](https://forum.readymag.com/u/Leeam_Levy)\
**Post date:** [July 1, 2024, 9:39pm UTC](https://forum.readymag.com/t/i-want-the-background-in-each-row-to-change-color-when-hovering/3185/1 "2024-07-01T21:39:04Z")

</div>

the issue is that it will appear where ever there is no text and when hovering over the text it wont appear.

 ![Screenshot 2024-07-01 143828](https://us1.discourse-cdn.com/flex015/uploads/readymag/original/2X/5/58ef5047a8cfc84f0ac4862ca5ee2225694a7203.png)

 ![Screenshot 2024-07-01 142837](https://us1.discourse-cdn.com/flex015/uploads/readymag/original/2X/0/09e3e8369a8fa2f7809bf72046f4bd70d2b5c9dc.png)

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [July 2, 2024, 7:52am UTC](https://forum.readymag.com/t/i-want-the-background-in-each-row-to-change-color-when-hovering/3185/3 "2024-07-02T07:52:24Z")

</div>

it would work like this:

You have your text lines as a single textelement.  
Beneath this you have a colored shape for each line.  
And above the text you have another transparent shape element for each line.

Now set up the animation:  
Select the colored shape and add a hover animation to change its opacity from 0 to 1 with the transparent shape as a trigger.