【问题标题】：Five star rating functionality五星级评分功能
【发布时间】：2014-08-11 23:56:56
【问题描述】：

如何使用 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 技能有点生疏。有关如何实现此功能的任何建议。

【问题讨论】：

你需要改变你的背景图片并使用精灵代替，你可以看看这个example
How to affect other elements when a div is hovered的可能重复

标签： javascript jquery html css

【解决方案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

【讨论】：

【解决方案2】：

使用鼠标悬停事件以编程方式选择其余部分

mouseover: function () {
  var sel = this.value:
  var options = $('ol li');

  for (var i = 1; i < sel; i++) {
     options[i].css('background-image', 'url(../images/starHover.png)')
   }
}

【讨论】：

如果你的意思是这是 JavaScript？ -- 那么是的:)
我的问题要求在不使用 java 脚本的情况下实现它。
我已经用一个简单的答案回答了我的一个问题

【解决方案3】：

这里有一个“现代”的例子，它使用 CSS 制作动画，使用 Angular 获取选定的结果。诀窍是悬停在 css 中！将鼠标悬停在容器上，将橙色类添加到所有星星，然后将不同的类（灰色）应用于选定的星星之后的所有星星。在您的示例中，它看起来像这样

.rate-this-stars-list:hover .star{
   color: orange;
}

然后选择一个之后的所有星星：

.rate-this-stars-list .star:hover ~ .star{
  color: #ddd;
}

但是，您可以在此链接上找到完整的工作 5 星评级示例 Angular 实现：

https://floyk.com/en/post/angular-star-rating-example

【讨论】：

【解决方案4】：

这样做的一个选择是使用 CSS Sprite + JS。想法是拥有所有 6 种可能性（0 颗星、1 颗星、2 颗星……）并根据光标的位置更改背景位置。

如果您想要更简单的东西，只需有 6 个单独的图像，并根据鼠标位置更改背景图像。

为此，制作一个与整个图像大小相同的容器，然后在该容器内放置 5 个小块（每个星一个）。然后让JS根据鼠标所在的位置改变容器的背景。

这里有一个使用 JQuery 和 CSS sprite 的示例（您可以轻松地使 JS 不那么冗长。这只是一个简单的示例）：

http://codepen.io/anon/pen/rkhcJ

HTML

<div id="container">
  <div id="1" class="star">1</div>
  <div id="2" class="star"></div>
  <div id="3" class="star"></div>
  <div id="4" class="star"></div>
  <div id="5" class="star"></div>
</div>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

CSS：

.star{
  float:left;
  height: 100%;
  width: 20%;
}

#container{
  background-image: url('http://img1.targetimg1.com/wcsstore/TargetSAS/11_05_2013_06_55/images/ratings-large-sprite-r5.gif');
  width: 226px;
  height: 50px;
  background-color: #c34;
  background
}

JS

$("#1").mouseover(function(){
  $("#container").css('background-position', '0px -38px');
});
$("#2").mouseover(function(){
  $("#container").css('background-position', '0px -76px');
});
$("#3").mouseover(function(){
  $("#container").css('background-position', '0px -114px');
});
$("#4").mouseover(function(){
  $("#container").css('background-position', '0px -152px');
});
$("#5").mouseover(function(){
  $("#container").css('background-position', '0px -190px');
});

$(".star").mouseout(function(){
  $("#container").css('background-position', '0px 0px');
});

【讨论】：

我已经用一个简单的答案回答了我的一个问题。不太清楚你在这里做什么。

【解决方案5】：

<style>
.star {
    font-size: x-large;
    width: 50px;
    display: inline-block;
    color: gray;
}
.star:last-child {
    margin-right: 0;
}
.star:before {
    content:'\2605';
}
.star.on {
    color: red;
}
.star.half:after {
    content:'\2605';
    color: red;
    position: absolute;
    margin-left: -20px;
    width: 10px;
    overflow: hidden;
}
</style>
<div class="stars"> 
<?php 
    $enable = 5.5;  //enter how many stars to enable
    $max_stars = 6; //enter maximum no.of stars
    $star_rate = is_int($enable) ? 1 : 0;
    for ($i = 1; $i <= $max_stars; $i++){ ?>
    <?php if(round($enable) == $i && !$star_rate) { ?>
            <span class="<?php echo 'star half'; ?>"></span>
    <?php } elseif(round($enable) >= $i) { ?>
            <span class="<?php echo 'star on'; ?>"></span>
    <?php } else { ?>
        <span class="<?php echo 'star'; ?>"></span>
    <?php } 
    }?>
</div>

【讨论】：

【解决方案6】：

我发现很多答案过于复杂，所以我做了一个单页 HTML/JavaScript 演示：

https://github.com/zamicol/rating

【讨论】：