With CSS, can I change the background to multiple

问题:

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
}

回答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;
}

回答2:

Use the jQuery prevAll() function.

<div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
</div>

put for the class star your normal bg image

<script>
  $("document").ready(function(){
    $(".star").hover(function(){
      $(this).css("background-image", "imageurl");
      $(this).prevAll().css("background-image", "imageurl");
    });
  });
</script>

That should solve your problem

回答3:

I believe that you were going in the right direction. html

<div id="stars">
    <div class="star">
      <div class="star">
        <div class="star">
            <div class="star">
                <div id="innermost" class="star">
                </div>
            </div>
        </div>
    </div>
</div>

css

.star {
display:block;
width:20px;
height:20px;
margin:0px;
padding-left:20px;
background:#00f;
border-left:1px solid #f00;
}
#innermost {padding-left:0px;}
#stars .star:hover{background:#ff0;}

http://jsfiddle.net/MpmMa/

回答4:

I know you have an accepted answer, but you do not need to change your HTML structure, just your CSS very slightly:

.clearfix div {
    float:right;        /* changed from left to right */
    position:relative;
}

.star:hover,
.star:hover ~ .star {      /*  add sibling combinator */
    ...
}

Of course you will have to switch "oh no" and "thanks" around, but this is a much tidier approach.

Working example: http://jsfiddle.net/LL9pH/8/