Skip to content

Instantly share code, notes, and snippets.

@monolithed
Created July 27, 2012 07:13
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save monolithed/3186606 to your computer and use it in GitHub Desktop.
rating stars
/**
* rating stars
*/
.rating {
height: 18px;
width: 82px;
}
.rating_star {
background: repeat-x url('http://dl.dropbox.com/u/14779502/rating_new.png');
line-height: 18px;
height: 18px;
overflow: hidden;
text-indent: -999em;
z-index: 1;
float: right;
width: 15px;
}
.rating_star + .rating_star {
padding-right: 1px;
}
.rating:hover .rating_star {
background-position: 0 -36px;
}
.rating_marked,
.rating_marked ~ .rating_star {
background-position: 0 -54px;
}
.rating:hover .rating_star:hover,
.rating_star:hover ~ .rating_star {
background-position: 0 -18px;
}
<div class="rating">
<a class="rating_star star_five" href="#">5</a>
<a class="rating_star star_four" href="#">4</a>
<a class="rating_star star_three" href="#">3</a>
<a class="rating_star star_two" href="#">2</a>
<a class="rating_star star_one" href="#">1</a>
</div>
<div class="rating">
<a class="rating_star star_five" href="#">5</a>
<a class="rating_star star_four" href="#">4</a>
<a class="rating_star star_three rating_marked" href="#">3</a>
<a class="rating_star star_two" href="#">2</a>
<a class="rating_star star_one" href="#">1</a>
</div>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment