星级评级“掉头”- HTML，CSS

Question

我想通过隐藏输入(单选按钮)和只显示标签(这是星型)来获得一个星级等级。点击其中一颗星星，它之前的所有星星也会变黄。所以我写了如下：

HTML和CSS创建单选按钮和标签：

​

input:not(:checked)~label:hover,
label:hover~input:not(checked)~label {
  color: #fd4;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<input type="radio" name="rate" id="rate-1">
<label for="rate-1" class="fa-solid fa-star"></label>
<input type="radio" name="rate" id="rate-2">
<label for="rate-2" class="fa-solid fa-star"></label>
<input type="radio" name="rate" id="rate-3">
<label for="rate-3" class="fa-solid fa-star"></label>
<input type="radio" name="rate" id="rate-4">
<label for="rate-4" class="fa-solid fa-star"></label>
<input type="radio" name="rate" id="rate-5">
<label for="rate-5" class="fa-solid fa-star"></label>

​

但是这些恒星是从右到左突出显示的，所以如果你在4颗恒星上方盘旋，那么第四和第五颗星星就会被高亮显示。

​

​

我怎么才能解决这个问题？

Answer 1

一个简单的解决方案是使用display:flex;添加一个容器，并使用弯曲方向反转元素。因为元素显示在DOM中，所以您需要确保反转HTML中元素的顺序，以便仍然得到正确的评级。

​

input:not(:checked)~label:hover,
label:hover~input:not(checked)~label {
  color: #fd4;
}
.rating-container {
  display:flex;
  flex-direction:row-reverse;
  justify-content:center;
}
input[type="radio"] {
  display:none;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="rating-container">
  <input type="radio" name="rate" id="rate-5">
  <label for="rate-5" class="fa-solid fa-star"></label>
  <input type="radio" name="rate" id="rate-4">
  <label for="rate-4" class="fa-solid fa-star"></label>
  <input type="radio" name="rate" id="rate-3">
  <label for="rate-3" class="fa-solid fa-star"></label>
  <input type="radio" name="rate" id="rate-2">
  <label for="rate-2" class="fa-solid fa-star"></label>
  <input type="radio" name="rate" id="rate-1">
  <label for="rate-1" class="fa-solid fa-star"></label>
</div>

​

Answer 2

另一种解决方案是将其放置在div中，使其具有弹性，这样标签之间就没有空间，每当您在div单选按钮上悬停时，按钮就会变成金色，但是直接悬停的单选按钮前面的按钮将被赋予正常的颜色。

​

.container {
  display: flex;
}

div:hover > label {
  color: #fd4;
}

div:hover > label:hover ~ label {
  color: #000;
}

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="container"> 
  <input type="radio" name="rate" id="rate-1">
  <label for="rate-1" class="fa-solid fa-star"></label>
  <input type="radio" name="rate" id="rate-2">
  <label for="rate-2" class="fa-solid fa-star"></label>
  <input type="radio" name="rate" id="rate-3">
  <label for="rate-3" class="fa-solid fa-star"></label>
  <input type="radio" name="rate" id="rate-4">
  <label for="rate-4" class="fa-solid fa-star"></label>
  <input type="radio" name="rate" id="rate-5">
  <label for="rate-5" class="fa-solid fa-star"></label>
</div>

​

我必须指出，虽然它对悬停非常有效，但如果没有JS，我无法找到一种方法来使星体在检查后保持黄金状态，在接受的解决方案中实现它要容易得多。