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

Posted 2023-03-06

【中文标题】使用表格的字体真棒 5 星评级

【英文标题】：Font Awesome 5 Star Rating using table

【发布时间】：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

【参考方案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 并查看。