Question

我正在关注一个评级教程，但只修改了一点代码。但是，当尝试合并十颗星（在提供的代码中注释）而不是五颗星时，该代码将无法正常工作。该代码假定标签的背面是相反的，以便它们按从 1到10 的顺序显示。而是按以下顺序显示 10 9 8 7 6 1 2 3 4 5

.star-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  padding: 10px 10px 10px 0;
}

.star-rating input[type=radio] {
  display: none;
}

.star-rating label {
  color: #bbb;
  font-size: 18px;
  padding: 0;
  cursor: pointer;
  transition: all .3s ease-in-out
}

.star-rating label:hover,
.star-rating label:hover~label,
.star-rating input[type=radio]:checked~label {
  color: #f2b600
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>

<body>


  <div class="star-rating">
    <!-- <input id="star-10" type="radio" name="rating" value="star-10">
<label for="star-10" title="10 stars">
        <i class="active fa fa-star" ></i>
    <input id="star-9" type="radio" name="rating" value="star-9">
    <label for="star-9" title="9 stars">
        <i class="active fa fa-star" ></i>
    <input id="star-8" type="radio" name="rating" value="star-8">
    <label for="star-8" title="8 stars">
        <i class="active fa fa-star" ></i>
    <input id="star-7" type="radio" name="rating" value="star-7">
    <label for="star-7" title="7 stars">
        <i class="active fa fa-star" ></i>
    <input id="star-6" type="radio" name="rating" value="star-6">
    <label for="star-6" title="6 stars">
        <i class="active fa fa-star" ></i> -->
    <input id="star-5" type="radio" name="rating" value="star-5">
    <label for="star-5" title="5 stars">
        <i class="active fa fa-star" ></i>
    </label>
    <input id="star-4" type="radio" name="rating" value="star-4">
    <label for="star-4" title="4 stars">
        <i class="active fa fa-star" ></i>
    </label>
    <input id="star-3" type="radio" name="rating" value="star-3">
    <label for="star-3" title="3 stars">
        <i class="active fa fa-star" ></i>
    </label>
    <input id="star-2" type="radio" name="rating" value="star-2">
    <label for="star-2" title="2 stars">
        <i class="active fa fa-star" ></i>
    </label>
    <input id="star-1" type="radio" name="rating" value="star-1">
    <label for="star-1" title="1 star">
        <i class=" active fa fa-star "></i>
  </div>
  </body>
  </html>

Answer 1

您丢失了</label>

.star-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  padding: 10px 10px 10px 0;
}

.star-rating input[type=radio] {
  display: none;
}

.star-rating label {
  color: #bbb;
  font-size: 18px;
  padding: 0;
  cursor: pointer;
  transition: all .3s ease-in-out
}

.star-rating label:hover,
.star-rating label:hover~label,
.star-rating input[type=radio]:checked~label {
  color: #f2b600
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>

<body>


  <div class="star-rating">
    <input id="star-10" type="radio" name="rating" value="star-10">
  <label for="star-10" title="10 stars">
        <i class="active fa fa-star" ></i>
        </label>
    <input id="star-9" type="radio" name="rating" value="star-9">
    <label for="star-9" title="9 stars">
        <i class="active fa fa-star" ></i>
        </label>
    <input id="star-8" type="radio" name="rating" value="star-8">
    <label for="star-8" title="8 stars">
        <i class="active fa fa-star" ></i>
        </label>
    <input id="star-7" type="radio" name="rating" value="star-7">
    <label for="star-7" title="7 stars">
        <i class="active fa fa-star" ></i>
        </label>
    <input id="star-6" type="radio" name="rating" value="star-6">
    <label for="star-6" title="6 stars">
        <i class="active fa fa-star" ></i>
        </label>
    <input id="star-5" type="radio" name="rating" value="star-5">
    <label for="star-5" title="5 stars">
        <i class="active fa fa-star" ></i>
    </label>
    <input id="star-4" type="radio" name="rating" value="star-4">
    <label for="star-4" title="4 stars">
        <i class="active fa fa-star" ></i>
    </label>
    <input id="star-3" type="radio" name="rating" value="star-3">
    <label for="star-3" title="3 stars">
        <i class="active fa fa-star" ></i>
    </label>
    <input id="star-2" type="radio" name="rating" value="star-2">
    <label for="star-2" title="2 stars">
        <i class="active fa fa-star" ></i>
    </label>
    <input id="star-1" type="radio" name="rating" value="star-1">
    <label for="star-1" title="1 star">
        <i class=" active fa fa-star "></i>
  </div>
  </body>
  </html>

CSS中的星级评定系统

1 个答案: