javascript - 五星级评级功能

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() );
        }
    });
});

DEMO1

使用CSS DEMO2