JSFiddle - React, Tailwind, and code Playground

by richlewis14

HTML

<div class="ratings">
	<ul>
		<li id="firstStar"></li>
		<li id="secondStar"></li>
		<li id="thirdStar"></li>
		<li id="fourthStar"></li>
		<li id="fifthStar"></li>
	</ul>

CSS

.ratings ul li {
	float:left;
	width:16px;
	height:16px;
	background:url("http://i.stack.imgur.com/S5T0M.png") 0 0 ;
}



.ratings ul li.goldstar {
	float:left;
	width:16px;
	height:16px;
	background:url("http://i.stack.imgur.com/S5T0M.png") 0 -18px ;
}

JavaScript

$(document).ready(function(){
   	$('.ratings li').hover(function(){
   		$(this).prevAll().andSelf().addClass('goldstar');
   	});
  });