CODEWITHSUNDEEP
cssrating
Mark Taylor
Mark Taylor

Reputation: 69

Making a star rating system with css design?

I'm trying to create a star rating system, where users can hover over stars to rate other users.

I'm just wanting to focus on the CSS design side of things at the moment. I know how I can achieve the stars to fade in when a user hovers their mouse over by using opacity in css for each image, but how can I do it so that if the user hovers over the 2nd or third star the previous stars are also faded in with it?

Any tips or advice would be appreciated. Below is what I have so far which just sets the opacity of each separate image, but would like to know how to get it working as mentioned so that star 1, 2 and 3 are faded in if the user is hovering over star 3.

.star {
    position: absolute;
    width: 200px;
    text-align: right;
    margin-top: 0px;
    margin-left: 189px;
    cursor: pointer;
    opacity:0.2;

    }

.star:hover {
    position: absolute;
    width: 200px;
    text-align: right;
    margin-top: 0px;
    margin-left: 189px;
    cursor: pointer;
    opacity:1.0;

    }

Upvotes: 2

Views: 1895

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

I would do it like this (using the general sibling combinator ~)

<ul class="stars">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

and

.stars li{
    float:left;
    width:20px;
    height:20px;
}
.stars:hover li{
   background-color:red; // or set a background image of SELECTED star
}
.stars li,
.stars li:hover ~ li{
    background-color:#ccc;// or set a background image of unselected star
}

Demo at http://jsfiddle.net/gaby/PJWZY/1/

I have played with the background-color. The same applies to the opacity..

Opacity demo at http://jsfiddle.net/gaby/PJWZY/2/

Upvotes: 3

Related Questions