I want to fill the rating icon i.e change far icon to fas on hover. How to achieve it?
Is it possible through CSS? or javascript is needed?
I dont know whether this is the best pratice. But this is my html and CSS. You can modify the css in your own way if this is not best practice.
<div id="rating-review"><div class="rating-group"><input disabled checked class="rating__input rating__input--none" name="rating" value="0" type="radio"><label aria-label="1 star" class="rating__label" for=""><i class="rating__icon rating__icon--star far fa-star"></i></label><input class="rating__input" name="rating" value="1" type="radio"><label aria-label="2 stars" class="rating__label" for=""><i class="rating__icon rating__icon--star far fa-star"></i></label><input class="rating__input" name="rating" value="2" type="radio"><label aria-label="3 stars" class="rating__label" for=""><i class="rating__icon rating__icon--star far fa-star"></i></label><input class="rating__input" name="rating" value="3" type="radio"><label aria-label="4 stars" class="rating__label" for=""><i class="rating__icon rating__icon--star far fa-star"></i></label><input class="rating__input" name="rating" value="4" type="radio"><label aria-label="5 stars" class="rating__label" for=""><i class="rating__icon rating__icon--star far fa-star"></i></label><input class="rating__input" name="rating" value="5" type="radio"></div></div>
My CSS:
#rating-review .rating-group {display: inline-flex;overflow: hidden;}#rating-review .rating__icon {pointer-events: none;}#rating-review .rating__input {position: absolute !important;left: -9999px !important;}#rating-review .rating__input--none {display: none;}#rating-review .rating__label {cursor: pointer;padding: 0 0.1em;font-size: 1.15rem;}#rating-review .rating__icon--star {color: #F48D21;}#rating-review .rating__input:checked\~.rating__label .rating__icon--star {color: #ddd;}#rating-review .rating-group:hover .rating__label .rating__icon--star {color: #F48D21;}#rating-review .rating__input:hover\~.rating__label .rating__icon--star {color: #ddd;}
How to acheive it?