用 CSS 设计制作星级评分系统？答案

【问题标题】：Making a star rating system with css design?用 CSS 设计制作星级评分系统？
【发布时间】：2012-12-19 00:42:37
【问题描述】：

我正在尝试创建一个星级评分系统，用户可以将鼠标悬停在星星上以对其他用户进行评分。

我现在只想专注于 CSS 设计方面的事情。我知道当用户将鼠标悬停在 css 中为每个图像使用不透明度时，如何实现星星淡入，但我该如何做到这一点，以便如果用户将鼠标悬停在第二颗或第三颗星上，之前的星星也是淡入淡出？

任何提示或建议将不胜感激。以下是我目前所拥有的，它只是设置每个单独图像的不透明度，但想知道如何让它如前所述工作，以便如果用户将鼠标悬停在星 3 上，星 1、2 和 3 会淡入。

.star {
    position: absolute;
    width: 200px;
    text-align: right;
    margin-top: 0px;
    margin-left: 189px;
    cursor: pointer;
    opacity:0.2;

    }

.star:hover {
    position: absolute;
    width: 200px;
    text-align: right;
    margin-top: 0px;
    margin-left: 189px;
    cursor: pointer;
    opacity:1.0;

    }

【问题讨论】：

fwiw，你不需要在:hover 中重新声明每条规则，只是那些被覆盖的规则（在你的情况下是opacity）

标签： css rating

【解决方案1】：

我会这样做（使用general sibling combinator ~）

<ul class="stars">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

和

.stars li{
    float:left;
    width:20px;
    height:20px;
}
.stars:hover li{
   background-color:red; // or set a background image of SELECTED star
}
.stars li,
.stars li:hover ~ li{
    background-color:#ccc;// or set a background image of unselected star
}

http://jsfiddle.net/gaby/PJWZY/1/的演示

我玩过background-color。这同样适用于不透明度..

http://jsfiddle.net/gaby/PJWZY/2/ 上的不透明度演示

【讨论】：