JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Widget</title>
<link rel="stylesheet" href="js/app2/resources/app.css">
</head>
<body class="claro">
<script data-dojo-config="async: 1, tlmSiblingOfDojo: 0, isDebug: 1"
src="js/dojo/dojo.js" defer></script>
<script src="js/boot2.js" defer></script>
<div style="width:50em; height:10em">
<span class='rating-5 rating-span'>
<span class='rating-4 rating-span'>
<span class='rating-3 rating-span'>
<span class='rating-2 rating-span'>
<span class='rating-1 rating-span'>
<div class='rating-star unselected'></div>
</span>
<div class='rating-star unselected'></div>
</span>
<div class='rating-star unselected'></div>
</span>
<div class='rating-star unselected'></div>
</span>
<div class='rating-star unselected'></div>
</span>
</div>
</body>
</html>
CSS
/**
* If you are developing a project that makes use of Dijit widgets, you will probably want to include the two files
* below; otherwise, you can remove them. When building for release, Dojo will automatically combine all of your
* @imported CSS files into a single file.
*/
@import '../../dojo/resources/dojo.css';
@import '../../dijit/themes/claro/claro.css';
/*div.rating-span{
display:inline-block;
height: 100%;
}*/
div.rating-star{
display:block;
float:right;
width:20%;
height:100%;
/*border:solid thin black;*/
padding:0px;
margin:0px;
}
div.rating-star.unselected {
background-image: url(http://danrumney.co.uk/images/star.jpg);
background-size: contain;
background-repeat: no-repeat;
}
.rating-span:hover > div.rating-star {
background-image: url(http://danrumney.co.uk/images/hover.jpg);
background-size: contain;
background-repeat: no-repeat;
}