CSS Звездные радио кнопки

Question

Я нашел код из http://jsfiddle.net/CAVpz/, мне просто нужно понять логику c, стоящую за стилем наведения, как она подсвечивает другие переключатели, когда я наводю указатель мыши на пользовательский переключатель, это код не обычный CSS код. Пожалуйста, было бы очень полезно, если бы кто-то мог дать краткое представление о том, как работает этот код.

 <input type="radio" name="rating" value="1"><i></i>
 <input type="radio" name="rating" value="2"><i></i>
 <input type="radio" name="rating" value="3"><i></i>
 <input type="radio" name="rating" value="4"><i></i>
 <input type="radio" name="rating" value="5"><i></i>
</span>
<br><br>
<span class="star-rating star-3">     
 <input type="radio" name="rating" value="1"><i></i>
 <input type="radio" name="rating" value="2"><i></i>
 <input type="radio" name="rating" value="3"><i></i>
</span>


.star-rating {
 font-size: 0;
 white-space: nowrap;
 display: inline-block;
 /* width: 250px; remove this */
 height: 50px;
 overflow: hidden;
 position: relative;
 background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
 background-size: contain;
}
.star-rating i {
 opacity: 0;
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 /* width: 20%; remove this */
 z-index: 1;
 background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
 background-size: contain;
}
.star-rating input {
 -moz-appearance: none;
 -webkit-appearance: none;
 opacity: 0;
 display: inline-block;
 /* width: 20%; remove this */
 height: 100%;
 margin: 0;
 padding: 0;
 z-index: 2;
 position: relative;
}
.star-rating input:hover + i,
.star-rating input:checked + i {
 opacity: 1;
}
.star-rating i ~ i {
 width: 40%;
}
.star-rating i ~ i ~ i {
 width: 60%;
}
.star-rating i ~ i ~ i ~ i {
 width: 80%;
}
.star-rating i ~ i ~ i ~ i ~ i {
 width: 100%;
}
::after,
::before {
 height: 100%;
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 text-align: center;
 vertical-align: middle;
}

.star-rating.star-5 {width: 250px;}
.star-rating.star-5 input,
.star-rating.star-5 i {width: 20%;}
.star-rating.star-5 i ~ i {width: 40%;}
.star-rating.star-5 i ~ i ~ i {width: 60%;}
.star-rating.star-5 i ~ i ~ i ~ i {width: 80%;}
.star-rating.star-5 i ~ i ~ i ~ i ~i {width: 100%;}

.star-rating.star-3 {width: 150px;}
.star-rating.star-3 input,
.star-rating.star-3 i {width: 33.33%;}
.star-rating.star-3 i ~ i {width: 66.66%;}
.star-rating.star-3 i ~ i ~ i {width: 100%;}

Answer 1

Хорошо, давайте разберемся с вами. Здесь мы применяем соседний братский комбинатор со знаком «+». Селектор соседних элементов выбирает все элементы, которые являются соседними элементами указанного элемента. Например:

    div + P {
      color: blue;
      border: 1px solid;
    }
    
    div{
      border: 1px solid;
    
    }

<div><p> child</p></div>
<p>I am your Adjacent sibling</p>

Приведенный выше код выберет p вне div, поскольку он является смежным элементом. Итак, здесь при наведении на поле ввода, поскольку его соседство равно i, мы добавляем смежный комбинатор.

.star-rating input:hover + i,

Далее мы выбираем и показываем выбранные звезды с этим css:

.star-rating input:checked + i{
   opacity: 1;
}

При нажатии проверяется поле ввода, которое просто делает видимым тег i (звездочка) с непрозрачностью 1. Затем мы применяем общий комбинатор сестринских сестер , который просто выбирает братьев и сестер определенного * 1037. * element.

div ~ p {
  background-color: yellow;
}

<p>Paragraph 1.</p>

<div>
  <p>Paragraph 2.</p>
</div>

<p>I am sibling</p>
<code>Some code.</code>
<p>I am sibling</p>
<p>I am sibling</p>
<p>I am sibling</p>

Так что здесь, при наведении на них последней звезды, которая равна 5. Мы хотим, чтобы все звезды также были выделены, и общий брат делает это для нас.

.star-rating i ~ i {
  width: 40%;
}
.star-rating i ~ i ~ i {
  width: 60%;
}
.star-rating i ~ i ~ i ~ i {
  width: 80%;
}
.star-rating i ~ i ~ i ~ i ~ i {
  width: 100%;
}

Наконец, мы назначаем различный фон для стартов в процентах:

.star-rating.star-5 {width: 250px;}
.star-rating.star-5 input,
.star-rating.star-5 i {width: 20%;}
.star-rating.star-5 i ~ i {width: 40%;}
.star-rating.star-5 i ~ i ~ i {width: 60%;}
.star-rating.star-5 i ~ i ~ i ~ i {width: 80%;}
.star-rating.star-5 i ~ i ~ i ~ i ~i {width: 100%;}

.star-rating.star-3 {width: 150px;}
.star-rating.star-3 input,
.star-rating.star-3 i {width: 33.33%;}
.star-rating.star-3 i ~ i {width: 66.66%;}
.star-rating.star-3 i ~ i ~ i {width: 100%;}

Надеюсь, что поможет:)

Answer 2

В двух словах:

1. У нас есть 2 фона, 1 с пустыми звездами и 1 с заполненными;
2. Мы назначаем пустой фон для span-wrapper;
3. Мы назначаем заполненный фон каждому элементу i и различаем ширину каждого i в%, который он будет покрывать (20%, 40%, 60%, 80%, 100%);
4. При наведении мы меняем непрозрачность для i:background, который был наведен.