<div class="star">
  <div class="star__item"><i class="fa fa-star" aria-hidden="true"></i></div>
  <div class="star__item"><i class="fa fa-star" aria-hidden="true"></i></div>
  <div class="star__item"><i class="fa fa-star" aria-hidden="true"></i></div>
  <div class="star__item"><i class="fa fa-star" aria-hidden="true"></i></div>
  <div class="star__item"><i class="fa fa-star" aria-hidden="true"></i></div>
</div>
body {
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0;
  margin: 0;
}

.star {
  display: flex;
}

.star__item {
  color: rgb(255, 202, 117);
  margin: 2px;
  cursor: pointer;
  font-size: 70px;
}

.star__item_select {
  color: rgb(255, 195, 48);
}

.star__item_active {
  color: rgb(255, 195, 48);
}

.star__item_active.star__item_select {
  color: rgb(255, 134, 0);
}
var stars = document.querySelectorAll(".star__item"), 
    starsActive,
    starsSelect;
 
stars.forEach((element, index) => {
  
	element.addEventListener('mouseover', ()=> {
    starsActive = Array.prototype.slice.call(stars, 0, index+1);
    starsActive.forEach((star) => {
      star.classList.add("star__item_active");
    });
  });
  
	element.addEventListener('mouseout', ()=> {
    stars.forEach((star) => {
      star.classList.remove("star__item_active");
    });
  });
  
	element.addEventListener('click', ()=> {
    stars.forEach((star) => {
      star.classList.remove("star__item_select");
    });
    starsActive.forEach((star) => {
      star.classList.add("star__item_select");
    });
     starsSelect = starsActive;
  });
  
});

External CSS

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

External JavaScript

This Pen doesn't use any external JavaScript resources.