使用表格的字体真棒 5 星评级答案

【问题标题】：Font Awesome 5 Star Rating using table使用表格的字体真棒 5 星评级
【发布时间】：2021-09-01 18:32:51
【问题描述】：

我尝试按照此代码 (https://codepen.io/pezmotion/pen/RQERdm) 并使用表格进行转换。但是当每颗星星悬停时，我之前的星星并没有跟随。

html

<table>
  <tbody>
    <tr class="rating">
      <td><input id="rating-5" type="radio" name="rating" value="5"/><label for="rating-5"><i class="fas fa-3x fa-smile"></i></label></td>
      <td><input id="rating-4" type="radio" name="rating" value="4" /><label for="rating-4"><i class="fas fa-3x fa-smile"></i></label></td>
      <td><input id="rating-3" type="radio" name="rating" value="3"/><label for="rating-3"><i class="fas fa-3x fa-smile"></i></label></td>
      <td><input id="rating-2" type="radio" name="rating" value="2"/><label for="rating-2"><i class="fas fa-3x fa-smile"></i></label></td>
      <td><input id="rating-1" type="radio" name="rating" value="1"/><label for="rating-1"><i class="fas fa-3x fa-smile"></i></label></td>
    </tr>
  </tbody>
</table>

css

.rating {
    direction: rtl;
    unicode-bidi: bidi-override;
    color: #ddd; /* Personal choice */
}
.rating td input {
    display: none;
}
.rating td label:hover,
.rating td label:hover ~ td label,
.rating td input:checked + td label,
.rating td input:checked + td label ~ td label {
    color: #ffc107; /* Personal color choice. Lifted from Bootstrap 4 */
}

这是我的代码。 https://codepen.io/ikramsyakir/pen/wvJNyzv

【问题讨论】：

标签： html css html-table css-selectors font-awesome

【解决方案1】：

这个怎么样：

（没有悬停的默认颜色为灰色，悬停时所有星星为黄色，但悬停后的所有星星被灰色覆盖）

.rating {
    unicode-bidi: bidi-override;
}
.rating input {
    display: none;
}
.rating label {
    color: #ddd; 
}
.rating:hover label {
    color: #ffc107; 
}
.rating label:hover ~ label {
    color: #ddd;
}

<script src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<div class="rating" style="width: 20rem">
    <input id="rating-5" type="radio" name="rating" value="5"/><label for="rating-5"><i class="fas fa-3x fa-star"></i></label>
    <input id="rating-4" type="radio" name="rating" value="4" checked /><label for="rating-4"><i class="fas fa-3x fa-star"></i></label>
    <input id="rating-3" type="radio" name="rating" value="3"/><label for="rating-3"><i class="fas fa-3x fa-star"></i></label>
    <input id="rating-2" type="radio" name="rating" value="2"/><label for="rating-2"><i class="fas fa-3x fa-star"></i></label>
    <input id="rating-1" type="radio" name="rating" value="1"/><label for="rating-1"><i class="fas fa-3x fa-star"></i></label>
</div>

【讨论】：

我明白了。感谢您的反馈。但仍然不能在我的桌子上工作。它似乎徘徊在我所有的星星上。
HTML 代码正是您的 codepen 的代码。在 CSS 部分，功能取决于 CSS 规则的顺序。
是的，我仍然不确定我在做什么，nvm，我一直在努力

【解决方案2】：

在表格中，您可能会重复控件的 id。尝试生成唯一 ID 并查看。

【讨论】：