I’m creating this site were users can rate and review something.
Rate is done through Star Rating input.
Obviously, 1 star is bad and 5-star is awesome.
What I want to do is the following:
As the user wants to enter a rating, I want the stars color to change depending on which star is hovered or pressed.
Therefore, the default, page-load color of the stars is grey. Then, when the Star Input is hovered over star n1, the star color changes to red; in star n2 the color changes to orange; in star n3 to yellow; star n4 to light green; and star n5 to dark green.
I’m testing different options here trying to make it work, with 0 results so far.
But I’m confident there is a way to do this.
Please help me and thanks in advance for your help!
I think the best option would be to group 5 star icons (fa, ionic, material, etc) into a Group Element, each star set to fixed width. Go to each star and create conditional statements:
Star 1
IF [this star] is hovered THEN icon color = #ff0000
If you want this scenario to occur: when star 4 is hovered, all stars from 1-4 are highlighted their respective colors, then you need to create more conditional statements on each star, ie:
Star 4
IF [this star] is hovered THEN... [star 1] icon color = #FF0000 [star 2] icon color = #FFA500 [star 3] icon color = #FFFF00 [this star] icon color = #4CA64C
If you want all stars to take on the same color, just change the color hex codes to fit your needs.
For each star, you must specify all potential states it should appear as and when that state is true (in this case, when each star is hovered). You could also trigger conditions based on another element on the page being hovered.
