Html 如何仅使用css创建评级系统

如何仅使用

css

创建评级系统。我不想使用

javascript/jquery

或其他任何东西。我也不想使用

图像/图像精灵。我只需要在鼠标悬停（鼠标悬停）而不是在点击和纯css。
这是我想要的示例图像

HTML

html代码

<div class="rate">
            <div class="rate-item">☆</div>
            <div class="rate-item">☆</div>
            <div class="rate-item">☆</div>
        </div> 

你可以遵循这个例子


您可以使用以获得更好的性能，也可以仅更改代码的“颜色”属性之外的“背景图像”属性。
除非您更清楚地说明您需要什么，否则我认为您无法获得高质量的帮助。您可以使用不同的类和背景图像（类vote5、类vote4…类vote1，其中每个类都有不同的背景图像），使用每个星的类（开和关），然后只乘以星，等等。是否可以不使用
表单
元素，如
标签
，
单选按钮
等，但是它不会保持评级，在这里使用单选按钮我们实际上允许保持评级。我真的很喜欢这个解决方案，如果使用Sass生成，它会是什么样子，这将是很有趣的。可以使一些整洁的“CSS”和适合混合。回答得好。这是一个令人惊讶的答案，应该是被接受的答案。演示被破坏了。这一个对我有用。我将尝试
fontawesome
，但我不想为此使用
背景图像。顺便说一下，我得到了答案。谢谢
article {
    padding-left: 50px; /* arbitrary, to expose the "zero stars" area half a star to the left of the first star.*/
}

.star-rating {
    margin: 0 auto;
    display:inline-block;
}
/* radio button stars */

/* you can easily stuff the generation of these repetitive chunks of CSS into a server-side language like ASP */
.rb0:checked ~ .rating,
label.rb0l:hover ~ .rating
{
    width: 0px; /* no stars */
} 

.rb1:checked ~ .rating,
label.rb1l:hover ~ .rating
{
    width: 16px; /* half a star */
} 

.rb2:checked ~ .rating,
label.rb2l:hover ~ .rating
{
    width: 32px; /* a star */
} 

.rb3:checked ~ .rating,
label.rb3l:hover ~ .rating
{
    width: 48px; /* 1.5 stars */
}

.rb4:checked ~ .rating,
label.rb4l:hover ~ .rating
{
    width: 64px; /* 2 stars */
}
.rb5:checked ~ .rating,
label.rb5l:hover ~ .rating
{
    width: 80px;
}
.rb6:checked ~ .rating,
label.rb6l:hover ~ .rating
{
    width: 96px;
}
.rb7:checked ~ .rating,
label.rb7l:hover ~ .rating
{
    width: 112px;
}
.rb8:checked ~ .rating,
label.rb8l:hover ~ .rating
{
    width: 128px;
}
.rb9:checked ~ .rating,
label.rb9l:hover ~ .rating
{
    width: 144px;
}
.rb10:checked ~ .rating,
label.rb10l:hover ~ .rating
{
    width: 160px; /* 5 stars */
}

.star-rating label.star {
    width: 16px; /* half star */
    left: -16px; /* half star */
    padding: 0;
    height: 40px; /* whole star + 2x padding (4px each for top and bottom) */ 
    position: relative;
    z-index: 3;
    float: left;
}

.star-rating label.star.last {
    width: 32px;
}

/* hide inputs (RBs and their labels) */
.star-rating input[type=radio],
.star-rating label.rb
{
    display: none;
}

/* using icons found at http://www.easyicon.cn/language.en/icondetail/523835/ */
.rating {
    background: url(http://cdn-img.easyicon.cn/png/5238/523834.gif) repeat-x top left;
    position: relative;
    z-index: 2;
    top: 4px; /* 1x padding */
    height: 32px; /* whole star */
    width:0px;
}

.rating-bg {
    background: url(http://cdn-img.easyicon.cn/png/5238/523835.gif) repeat-x top left;
    position: relative;
    z-index: 1;
    top: -28px; /* 1 whole star - 1x padding */
    height: 32px; /* whole star */
    width: 160px;
}

/* IE8 fallback to radio buttons */
.ie8 .star-rating input,
.ie8 .star-rating label.rb
 {
    display: inline-block;
}

.ie8 .rating,
.ie8 .rating-bg,
.ie8 .star-rating label.star {
    display: none;
}

<div class="rate">
            <div class="rate-item">☆</div>
            <div class="rate-item">☆</div>
            <div class="rate-item">☆</div>
        </div> 

  .rate{
        color:black;
        cursor:pointer;
    }
    .rate:hover{
        color:red;
    }
    .rate-item{
        float:left;
        cursor:pointer;
        margin:0px 15px 0px 15px;
    }
    .rate-item:hover ~ .rate-item {
        color: black;
    }