<div id="rating">
  <i class="fa fa-star active"></i>
  <i class="fa fa-star-o"></i>
  <i class="fa fa-star-o"></i>
  <i class="fa fa-star-o"></i>
  <i class="fa fa-star-o"></i>
</div>
.fa{
  font-size:30px;
}
#rating{
  font-size:0;
  width:140px;
}
$('.fa').on('mouseover', function(){
  var $this = $(this);
  $this.nextAll().removeClass('fa-star').addClass( "fa-star-o" );
  $this.prevAll().removeClass( "fa-star-o" ).addClass('fa-star');
  $this.removeClass( "fa-star-o" ).addClass('fa-star');
});
$('.fa').one('click',function(){
 var $this = $(this); $this.addClass('active').siblings().removeClass('active');
});
$('.fa').on('mouseleave', function(){
  var select = $('.active');
  select.nextAll().removeClass('fa-star').addClass('fa-star-o');
  select.prevAll().removeClass('fa-star-o').addClass('fa-star');
  select.removeClass('fa-star-o').addClass('fa-star');
});
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js