Font Awesome 5星评级使用表

Question

我尝试遵循这段代码(https://codepen.io/pezmotion/pen/RQERdm)并使用table对其进行转换。但我的前一颗星在每一颗星上盘旋时并没有跟随。

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

Answer 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>

​