如何使用：之前实施星级评定系统

Question

编辑：这不是重复，因为此问题上的HTML结构非常具体。

我在CSS中实施星级评分系统时遇到了一个小问题。有两件我可以通过的优秀项目。

单选按钮最终会被隐藏。

不幸的是，我的HTML结构非常有限，这是我必须留在的结构。

1）单击单选按钮后，相关的星形将变为蓝色。

2）点击单选按钮后，所有之前的星星也将变为蓝色。

＆＃13;

＆＃13;

.scale-label {
  display: none;
}
.scale-option:before {
  color: #CCC;
  content: "\2605";
  font-size: 25px;
}
.scale-option:hover:before {
  color: gold;
}

＆＃13;

<div id="view-container">
  <label class="scale-option">
    <input class="scale-input" type="radio" value="1" name="satisfaction">
    <span class="scale-label">1</span>
  </label>
  <label class="scale-option">
    <input class="scale-input" type="radio" value="2" name="satisfaction">
    <span class="scale-label">2</span>
  </label>
  <label class="scale-option">
    <input class="scale-input" type="radio" value="3" name="satisfaction">
    <span class="scale-label">3</span>
  </label>
</div>

＆＃13;

＆＃13;

＆＃13;

我还有CodePen。