Making a star rating hover effect

[Kristophpher]

Hello Everyone,
I have searched everywhere and can't find any information on this... So I hope you can help me.

My question:
How do I make a dynamic star rating system/bar in Adobe XD?? I would like to use the Hover effect.
I am inspired by the rating system that Goodreads use (see video attached)

Thanks for your help.

[Dan Rodney]

You'd need multiple hovers, but when I tried layering them you couldn't see the ones underneath. So I don't think you can do this, but I'm curious to see if anyone else comes up a tricky idea to get this to work.

[Kristophpher]

Hi Dan, 

Thanks for trying. 
Yes it's a tricky one indeed...
Hope someone have a good solution 

[Eloi_papas]

I want to create this effect with the stars:

2 rectangles (2 colours) in a component, the component is a scroll horizontall bar. I keep only the dark part visible usinng the sliders.

Then I crop the starts on a rectangle who has the same colour as the BG

I put the stars on top of the scroll component 


component probably needs some explanation...

[Eloi_papas]

Alternatively, 

you can create a component that has a star on it, when click star changes its color; so that's for the first star.
For the second and next stars, you can copy past the component and deplace in next position, on click you can add a nnew star where prvious star was and change its color.

it works

[Spas K.]

Here's an example setup, it's a bit fiddling around, but it works nicely - stars change on hover, and you can click the selected rating to "set" it permanently.

The file:

https://www.dropbox.com/s/t20hznfnd22wmnx/Rating.xd?dl=0

The prototype:
https://xd.adobe.com/view/69b69220-8436-4db6-81d9-894f8f7afea4-3ce5/