html - 获取单选按钮标签以在我检查后保持相同的颜色

Question

我有一个 radio ，当用户将鼠标悬停在它们上面时，选项会从灰色变为黑色。但我希望选中的选项保持黑色，即使用户不再将鼠标悬停在它上面。我根本无法做到这一点。

label {
  color: grey;
}

label:hover {
  cursor: pointer;
  color: black;
}

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

input[type="radio"]:checked+label {
  color: black;
}

<div star-buttons>
  <label><input class="star-buttons" type="radio" name="radio" value="1"> ☆ <br></label>
  <label><input class="star-buttons" type="radio" name="radio" value="2"> ☆ ☆<br></label>
  <label><input class="star-buttons" type="radio" name="radio" value="3"> ☆ ☆ ☆<br></label>
  <label><input class="star-buttons" type="radio" name="radio" value="4"> ☆ ☆ ☆ ☆<br></label>
  <label><input class="star-buttons" type="radio" name="radio" value="5"> ☆ ☆ ☆ ☆ ☆<br></label>
</div>

我试图在我的 CSS 的最后一行中做一些类似的事情，但那不起作用。我如何完成这项工作？

Answer 1

+ 是兄弟选择器，使用此标记标签是父级。 CSS 中没有父选择器。但是我们仍然可以完成它!在星星周围放置一个包装器以像这样利用兄弟选择器:

label {
  color: grey;
}

label:hover {
  cursor: pointer;
  color: black;
}

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

input[type="radio"]:checked + .stars-txt {
  color: black;
}

<div>
  <label>
    <input class="star-buttons" type="radio" name="radio" value="1">
    <div class="stars-txt">☆</div>
  </label>
  <label>
    <input class="star-buttons" type="radio" name="radio" value="2">
    <div class="stars-txt">☆ ☆</div>
  </label>
  <label>
    <input class="star-buttons" type="radio" name="radio" value="3">
    <div class="stars-txt">☆ ☆ ☆</div>
  </label>
  <label>
    <input class="star-buttons" type="radio" name="radio" value="4">
    <div class="stars-txt">☆ ☆ ☆ ☆</div>
  </label>
  <label>
    <input class="star-buttons" type="radio" name="radio" value="5">
    <div class="stars-txt">☆ ☆ ☆ ☆ ☆</div>
  </label>
</div>