CSS星级-在悬停的星级之前选择所有星级

<div class="rating">
  <input type="radio" name="rating" id="star5">
  <label for="star5"></label>
  <input type="radio" name="rating" id="star4">
  <label for="star4"></label>
  <input type="radio" name="rating" id="star3">
  <label for="star3"></label>
  <input type="radio" name="rating" id="star2">
  <label for="star2"></label>
  <input type="radio" name="rating" id="star1">
  <label for="star1"></label>
</div>

.rating {
  display: inline-block;
}

.rating input[type="radio"] {
  display: none;
}

.rating label {
  float: right;
  cursor: pointer;
  width: 16px;
  height: 16px;
  background-image: url(star.png);
}

.rating label:hover,
.rating input[type="radio"]:checked ~ label {
  background-position: 0 -16px;
}