JSFiddle - React, Tailwind, and code Playground

by nirmal bhagwani

HTML

<div class="rating">
		<div class="star-rating" title="153 votes">
            <a href="#" id="star-1-full"><span class="star star-full"></span></a>
            <a href="#" id="star-2-full"><span class="star star-full"></span></a><a href="#" id="star-3-full"><span class="star star-full"></span></a><a href="#" id="star-4-full"><span class="star star-half"></span></a><a href="#" id="star-5-half"><span class="star star-empty"></span></a><p>153 votes</p></div>	</div>

CSS

@font-face{
    font-family:dashicons;
    src:url(http://cdn.lukej.me/dashicons/0.1.0/fonts/dashicons.eot) format('eot'),
	url(http://cdn.lukej.me/dashicons/0.1.0/fonts/dashicons.woff) format('woff'),
	url(http://cdn.lukej.me/dashicons/0.1.0/fonts/dashicons.ttf) format('truetype'),
	url(http://cdn.lukej.me/dashicons/0.1.0/fonts/dashicons.svg) format('svg');
    font-weight:400;font-style:normal;
}
.star{
    display:inline-block;
    width:100px;
    height:100px;
}

.star-rating .star-empty:before {
  content: "\f154";
}

.star-rating .star-full:before {
  content: "\f155";
}

.star-rating .star-half:before {
  content: "\f459";
}

a, a:visited{
    text-decoration: none;
}
.star-rating .star {
  color: #FECB30;
  display: inline-block;
  font-family: dashicons;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  height: 16px;
  line-height: 1;
  text-align: center;
  text-decoration: inherit;
  vertical-align: top;
  width: 16px;
}

}

JavaScript

$(document).ready(function () {
    $(document).on('mouseenter', '.star-rating', function () {
console.log('as1s');
        $('[id^=star-]').html('<span class="star star-empty"></span>');

    }).on('mouseleave', '.star-rating', function () {
console.log('as');
        $('[id^=-full]').html('<span class="star star-full"></span>');
        $('[id^=-half]').html('<span class="star star-half"></span>');
        $('[id^=-empty]').html('<span class="star star-empty"></span>');   
   });
});