Select all items before hovered item

Question

I have a container with 5 inline stars.

What I need is when you hover over a star, that star and all the stars before it get a different background . (I\'m using a s

Answer 1

For anyone who feels that direction: rtl is too hacky (because it was never really designed to align a group of star rating icons), I recommend floating the stars to the right instead:

.star {
    float: right;
    width: 20px;
    height: 15px;
    background: url(stars.png) 0 -1px no-repeat;
}

Since the wrapper is an inline block itself anyway, it will still shrink-to-fit.

For that matter, you can even float the wrapper as well if you decide that you really hate inline blocks and want to ditch them entirely:

.wpr {
    padding: 10px 20px;
    border: 1px solid gold;
    border-radius: 5px;
    float: left;
    position: relative;
    font-size: 0;
}