JSFiddle - React, Tailwind, and code Playground

by lastent

HTML

<div class="rating-stars">
    <a class="star-on"></a>
    <a class="star-on"></a>
    <a class="star-on"></a>
    <a></a>
    <a></a>
</div>

CSS

.rating-stars > a {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("http://i58.tinypic.com/aqadt.png");
}
.rating-stars > a.star-on{
   background: url("http://i57.tinypic.com/vyt6jn.png");
}
.rating-stars > a.star-temp-off{
   background: url("http://i58.tinypic.com/aqadt.png");
}
.rating-stars > a.star-temp-on{
   background: url("http://i57.tinypic.com/vyt6jn.png");
}

JavaScript

$(function(){
    $(".rating-stars").on('mouseenter',function(){
        $(this).find('a').addClass('star-temp');
    });
    $(".rating-stars").on('mouseleave',function(){
        $(this).find('a').removeClass('star-temp');
    });
    $(".rating-stars a").on('mouseenter',function(){
        $(this).nextAll().removeClass('star-temp-on');
        $(this).addClass('star-temp-on');
        $(this).prevAll().addClass('star-temp-on');
    });
});