CSS Help to see stars [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently acce开发者_Python百科pting answers.

---

Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist

Closed 9 years ago.

Improve this question

I have looked around and have been unable to write a CSS code that is based on a 5 star rating system that will change based upon customer feedback. Any help is appreciated.

---

You could try a positioned sprite-sheet:

HTML:

<div class="rating one-star"></div>

CSS:

.rating
{
  background-image: url(stars.png);
  background-repeat: no-repeat;
  height: 20px;
  width: 100px;
}

/* assume a star is 20x20 */

.one-star
{
  background-position: -80px 0;
}
.two-star
{
  background-position: -60px 0;
}
.three-star
{
  background-position: -40px 0;
}
.four-star
{
  background-position: -20px 0;
}
.five-star
{
  background-position: 0 0;
}

Of course you may want the div to contain 5 links with star outlines, hover effects, or other such things. It really depends on what you're looking for.

---

As peterthegreat mentioned, you might want to look into a javascript solution.

Example of a jquery plugin