CSS Star单选按钮

Question

我从http://jsfiddle.net/CAVpz/中找到了一个代码，我只需要了解鼠标悬停样式背后的逻辑，当我将鼠标悬停在自定义单选按钮上时如何突出显示其他单选按钮，该代码不是普通的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

简而言之：