Question

我想创建一个类似于IMDB评级系统，例如，当您将鼠标悬停在9/10时，所有9颗星都会被填充，而不是只悬停在其中。我试过这样的事情：

.add-rate:hover,
.add-rate:hover ~ .add-rate:before {

但我真的不确定~符号是什么以及它是如何工作的。

JSFiddle

Answer 1

~是general sibling selector。为了实现这一点，您希望颠倒星星的顺序（您可以使用flex与flex-direction进行视觉上的操作）并定位.add-rate:hover ~ .add-rate

.add-rate {
  font-size: 20px;
  cursor: pointer;
  color: gray;
}

.add-rate:hover,
.add-rate:hover ~ .add-rate {
  color: orange;
}

.stars {
  display: inline-flex;
  flex-direction: row-reverse;
}

<div class="rating-box">Rating: 1/10<br>
  <div class="stars">
    <span class="add-rate" onmouseup="rate('montauk', '1', 'rate.php')"><i class="fa fa-star" aria-hidden="true"></i></span> <span class="add-rate" onmouseup="rate('montauk', '2', 'rate.php')"><i class="fa fa-star" aria-hidden="true"></i></span>
    <span
    class="add-rate" onmouseup="rate('montauk', '3', 'rate.php')"><i class="fa fa-star" aria-hidden="true"></i></span> <span class="add-rate" onmouseup="rate('montauk', '4', 'rate.php')"><i class="fa fa-star" aria-hidden="true"></i></span> <span class="add-rate" onmouseup="rate('montauk', '5', 'rate.php')"><i class="fa fa-star" aria-hidden="true"></i></span>      <span class="add-rate" onmouseup="rate('montauk', '6', 'rate.php')"><i class="fa fa-star" aria-hidden="true"></i></span> <span class="add-rate" onmouseup="rate('montauk', '7', 'rate.php')"><i class="fa fa-star" aria-hidden="true"></i></span>
      <span
      class="add-rate" onmouseup="rate('montauk', '8', 'rate.php')"><i class="fa fa-star" aria-hidden="true"></i></span> <span class="add-rate" onmouseup="rate('montauk', '9', 'rate.php')"><i class="fa fa-star" aria-hidden="true"></i></span> <span class="add-rate" onmouseup="rate('montauk', '10', 'rate.php')"><i class="fa fa-star" aria-hidden="true"></i></span>
  </div>

CSS星级评分 - 在悬停之前选择所有星星

1 个答案: