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

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

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.