星级 "Turned Around" - 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; 的容器并使用 flex-direction 反转元素。因为元素在 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 中，使其弯曲，这样标签之间就没有 space，每当您将鼠标悬停在 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 的情况下找到让星星在检查后保持金色的方法，在公认的解决方案中实现起来要容易得多。

星级 "Turned Around" - HTML、CSS

Star rating "Turned Around" - HTML, CSS

html

css

label

input