使用Css DEMO2

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给了我这个：

Rate this Page

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

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

输出：

Rate this page with only one star

所以显然这只会影响我悬停的明星。但是我很奇怪当我将鼠标悬停在星星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

Answer 2

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

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

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

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

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

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

Answer 3

这样做的一个选择是使用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');
});

Answer 4

使用mouseover事件以编程方式选择其余部分

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)')
   }
}

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

Answer 6

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

https://github.com/zamicol/rating

五星评级功能

6 个答案:

DEMO1

使用Css DEMO2