Question

I’m trying to use javascript as little as possible on this project. I would like to create a a voting thing on my site, with stars.

I will have 5 stars, sort of faded out, and when the user rolls over the first, the first will light up, and then they roll over the second, both the second and first light up, until they reach the fifth star, when all stars will be lit.

I tried surrounding them with div tags, so that they would be grouped, but it made all five stars light up every time.

I tried adjusting the z-index of the groups, so that I could hover over the first stars first, but that didn’t work either.

Perhaps this can’t be done in CSS, but I feel like there should be some shortcut to it. Let me know if you can think of anything.

Here’s the JSFiddle that I’m working off of: Working sample

HTML

<div class="clearfix" id="stars">
    <div class="darn">Oh no!</div>
    <div class="star off"></div>
    <div class="star off"></div>
    <div class="star off"></div>
    <div class="star off"></div>
    <div class="star off"></div>
    <div class="brilliant">Thanks!</div>
</div>

CSS

.clearfix div {
    float:left;
    position:relative;
}

#stars {
    width:450px;
    margin:0 auto;
}

.star {
    width:64px;
    height:64px;
    background:url(http://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Full_Star_Blue.svg/64px-Full_Star_Blue.svg.png) no-repeat;
 }

.star:hover {
    background:url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Full_Star_Yellow.svg/64px-Full_Star_Yellow.svg.png) no-repeat;
    cursor:pointer;
}

.group {
    position:absolute
}

Answer 1

If I understood you right, this grouping of divs inside div might work (only FF tested, though, but you get the picture)
http://jsfiddle.net/LL9pH/1/

[edit] fixed the text positioning still, http://jsfiddle.net/LL9pH/3/

HTML

<div class="clearfix" id="stars">
    <div class="darn">Oh no!</div>
    <div class="star off">
        <div class="star off">
            <div class="star off">
                <div class="star off">
                    <div class="star off"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="brilliant">Thanks!</div>
</div>

CSS

.star .star { 
    margin-left: 70px;
}

.brilliant {
    margin-left: 400px;
    margin-top: -64px;
}