2

How can I achieve a five star rating functionality using css.

I have some 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>

And some additional css which gives me this:

Rate this Page

I then have a css hover state which swaps the grey star with a pink star:

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

Output:

Rate this page with only one star

So obviously this will only effect the star I hover over. But I was wonder How would I be able to highlight star 1, 2, 3, and 4 when i hover over star 4. So highlight all the stars that trial the selected.

I also want to be able to keep the stars pink if a click event is triggered. I want to basically do this with css and no javascript.

My css skills are a bit rusty. Any suggestions on how to achieve this functionality.

arled
  • 2,577
  • 6
  • 27
  • 49
  • You need to change your background image and use sprites instead, you can take a look at this [example](https://www.inkling.com/read/css-cookbook-christopher-schmitt-3rd/chapter-6/recipe-6-15) – Ihab Khattab Aug 12 '14 at 00:07
  • possible duplicate of [How to affect other elements when a div is hovered](http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered) – bencripps Aug 12 '14 at 00:09

6 Answers6

5

I Got This

Javascript to get the ratings

$(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

Using Css DEMO2

cracker
  • 4,900
  • 3
  • 23
  • 41
1

use mouseover event to programmatically select the rest

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)')
   }
}
Cute_Ninja
  • 4,742
  • 4
  • 39
  • 63
1

here is little bit 'modern' example by using CSS for animations and Angular for getting the selected result. The trick is in css on hover! On mouse over the container, add the orange class to all stars, and apply different class (gray) to all stars after the selected one. In your example it will look something like this

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

and then all stars after selected one:

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

but, you can find full working 5 stars rating example with Angular implementation on this link:

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

Igor Simic
  • 510
  • 4
  • 4
0

One option for doing that is using CSS Sprite + JS. The idea is to have all 6 possibilities (0 stars, 1 star, 2 stars, ...) and change the background position according to the position of the cursor.

If you want something simpler, just have 6 separate images and change the background image according to the mouse position.

To do that, make a container of the size of the entire image and then 5 small blocks inside this container (one for each star). Then make the JS change the container's background according to where the mouse is.

An example using JQuery and CSS sprite is here (you can easily make the JS less verbose. This is just a simple example):

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');
});
DanielX2010
  • 1,897
  • 1
  • 24
  • 26
  • I've answered my one question with a simple answer. Not too sure what you're going on about here. – arled Aug 12 '14 at 01:19
0
<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>
user3909765
  • 11
  • 1
0

I found a lot of the answers overly complex, so I made a single page HTML/JavaScript demo:

https://github.com/zamicol/rating

Zamicol
  • 4,626
  • 1
  • 37
  • 42