Hover over background color on other labels

Question

This is very complicated, and I will explain it best if I have full working code.

I have some rating code and I need it to do the following:

For example: press the 5th course (last) ... It will change color and all those that are green before it.

Now comes the hard part.

If you now hover over any of them up to the 5th (selected), I need the selected (in this case, 5th) and any between where you hover over a different background color.

So, if the chosen one was 5th, and I hung on the 2nd, then the 5th, 4th and 3rd should have a different background color.

I hope I explained it correctly.

Here is the jsfiddle:

https://jsfiddle.net/Satch3000/chd6yfzw/1/

and below is the code:

HTML:

<div class="rating-system1">
    <input type="radio" name='rate' id="star5" />
    <label for="star5"></label>

    <input type="radio" name='rate' id="star4" />
    <label for="star4"></label>

    <input type="radio" name='rate' id="star3" />
    <label for="star3"></label>

    <input type="radio" name='rate' id="star2" />
    <label for="star2"></label>

    <input type="radio" name='rate' id="star1" />
    <label for="star1"></label>
</div>

CSS

.rating-system1 {
  display: inline-block;
  position: relative;
} 

input {
  display: none;
}

label {
  float: right;
  display: inline-block;
  background: #ccc;
  position: relative;
}

.rating-system1 label:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  top:0;
  left:0;
}

.rating-system1 input:checked ~ label,
.rating-system1 label:hover ~ label,
.rating-system1 label:hover {
  background: seagreen;
}

.rating-system1 input:checked ~ label:before {
  transform: rotate(90deg);
}

Answer 1

background :checked, :

.rating-system1:hover input:checked ~ label{
    background:#666;
}

, background:

.rating-system1 input:checked ~ label,
.rating-system1 label:hover ~ label,
.rating-system1 label:hover,
.rating-system1 input:checked ~ label:hover ~ label, /* added */
.rating-system1 input:checked ~ label:hover,         /* added */
.rating-system1 label:hover ~ input:checked ~ label{ /* added */
    background:seagreen;
}

Fiddle.

Answer 2

:

.rating-system1 input:checked ~ label {
  background:#ccc;
}

.rating-system1:not(:hover) input:checked ~ label,
.rating-system1 input:checked ~ label:hover,
.rating-system1 input:checked ~ label:hover ~ label {
  background:seagreen;
}

, Linus, :

body{background:#222;}

.showcase{
  text-align:center;
  position: absolute;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
}

.rating-system1 {
  width:100%;
  height:10px;
  display:inline-block;
  margin:2px;
  position: relative;
} 

input{
  display:none;
}

label{
  float:right;
  display:inline-block;
  width:30px;
  height:10px;
  background:#ccc;
  margin:4px;
  position: relative;
  transition:all .3s;
}

.rating-system1 label:before{
  content: '';
  position: absolute;
  width:100%;
  height:100%;
  background: inherit;
  top:0;
  left:0;
  transition:all 0.3s;
}

.rating-system1 input:checked ~ label,
.rating-system1 label:hover ~ label,
.rating-system1 label:hover{
  background:seagreen;
}

.rating-system1 input:checked ~ label {
  background:#ccc;
}

.rating-system1:not(:hover) input:checked ~ label,
.rating-system1 input:checked ~ label:hover,
.rating-system1 input:checked ~ label:hover ~ label {
  background:seagreen;
}

.rating-system1 input:checked ~ label:before{
  transform:rotate(90deg);
}

.text{
  color:#ccc;
  padding:10px 0;
  position: absolute;
  width:100%;
  top:100%;  
}

<div class="showcase">
<div class="rating-system1">

<input type="radio" name='rate' id="star5" />
<label for="star5"></label>

<input type="radio" name='rate' id="star4" />
<label for="star4"></label>

<input type="radio" name='rate' id="star3" />
<label for="star3"></label>

<input type="radio" name='rate' id="star2" />
<label for="star2"></label>

<input type="radio" name='rate' id="star1" />
<label for="star1"></label>

</div>

</div>

Hide result