Quantcast
Channel: Active questions tagged onhover - Stack Overflow
Viewing all articles
Browse latest Browse all 49

How to fill the font awesome rating icon on hover for my following code?

$
0
0

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?


Viewing all articles
Browse latest Browse all 49

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>