五星级功能

Question

如何使用 css 实现五星级评级功能。

我有一些 html：

<span class="rate-this-stars">
  <h5>Rate this page</h5>
  <ol class="rate-this-stars-list">
    <li class="star" value="5"></li>
    <li class="star" value="4"></li>
    <li class="star" value="3"></li>
    <li class="star" value="2"></li>
    <li class="star" value="1"></li>
  </ol>
</span>

还有一些额外的 css 给了我这个：

然后我有一个 css 悬停状态，它用粉红色的星星交换灰色的星星：

span.stars ol li:hover {
  background-image: url(../images/starHover.png);
}

输出：

所以显然这只会影响我悬停的星星。但我想知道当我将鼠标悬停在第 4 颗星上时，我如何能够突出显示第 1、2、3 和 4 颗星。所以突出显示所有试用选定的星星。

如果触发点击事件，我还希望能够使星星保持粉红色。我想基本上用css而不是javascript来做到这一点。

我的css技能有点生疏。有关如何实现此功能的任何建议。

Answer 1

我懂了

用于获取评分的 Javascript

$(document).ready(function() {
    $("form#ratingForm").submit(function(e) 
    {
        e.preventDefault(); // prevent the default click action from being performed
        if ($("#ratingForm :radio:checked").length == 0) {
            $('#status').html("nothing checked");
            return false;
        } else {
            $('#status').html( 'You picked ' + $('input:radio[name=rating]:checked').val() );
        }
    });
});

演示1

使用 CSS DEMO2