2

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

我现在只想专注于 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;

    }
4

1 回答 1

3

我会这样做（使用通用兄弟组合~器）

<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/上的不透明度演示

于 2012-12-19T01:05:24.597 回答