Struggling with my pure CSS star rating implementation, specifically with the hover effect. When hovering on one rating star, the behavior affects the first or all five stars of the previous question.
https://i.sstatic.net/cpjvw.png
In the provided image, attempting to rate the second question triggers the hovering effect on the first five stars of the initial question. Here is a snippet of the code:
<ng-container *ngFor="let x of evaluation_form; let i = index">
<div class="row">
...
</div>
<div class="row" *ngFor="let y of x.segments; let j = index" [@hideShowAnimator]="i == hideShowAnimator">
...
<fieldset class="rating">
...
</fieldset>
...
</div>
<div class="row" (click)="hideShowAnimation(i)">
...
</div>
</ng-container>
The CSS styling for the radio buttons used in the rating system:
.rating {
float: left;
}
...
Seeking guidance on making the five-star rating dynamic for each question in Angular 2. Any assistance would be greatly appreciated. Thank you!