废料方法和实施金字塔绝对定位

Question

我有一系列div用于创建“星级”输入。通常情况下，恒星是灰色的，当鼠标越过其中一颗恒星时，恒星会填充一种颜色，并且它正在工作。

现在我想要一个“模仿”：悬停行为的类，我称之为active，所以当我把那个星星填满颜色时，但是这个颜色不起作用。

这里是代码：

HTML

<span class="rating">
 <span class="star active"></span>
 <span class="star"></span>
 <span class="star"></span>
 <span class="star"></span>
 <span class="star"></span>
</span>

CSS

.rating span.star:before {
    content: "\f005";
    padding-right: 5px;
    color: #bbb;
}

.rating span.star:hover:before, .rating span.star.active, .rating span.star:hover ~ span.star:before {
    color: #ffbe0d;
}

这是小提琴：http://jsfiddle.net/fuTfX/

我正在使用FontAwesome来显示星星

Answer 1

尝试一下（我将:before上的颜色移到了span）：

.rating span.star {
    color: #bbb;
}
.rating span.star:before {
    content: "\f005";
    padding-right: 5px;
}

.rating span.star:hover:before, .rating span.star.active, .rating span.star:hover ~ span.star:before {
    color: #ffbe0d;
}

Answer 2

您忘记将:before添加到.active规则。改变

.rating span.star:hover:before, .rating span.star.active, .rating span.star:hover ~ span.star:before {
    color: #ffbe0d;
}

到

.rating span.star:hover:before, .rating span.star.active:before, .rating span.star:hover ~ span.star:before {
    color: #ffbe0d;
}

Answer 3

废料方法和实施金字塔绝对定位

的jsfiddle ---＆GT; http://jsfiddle.net/5n5Xt/

HTML：

<ul>
  <li><a href="#"><span>Rating 1 of 5</span></a></li>
  <li><a href="#"><span>Rating 2 of 5</span></a></li>
  <li><a href="#"><span>Rating 3 of 5</span></a></li>
  <li><a href="#"><span>Rating 4 of 5</span></a></li>
  <li><a href="#"><span>Rating 5 of 5</span></a></li>
</ul>

CSS：

ul { background: url(gray_stars.png) no-repeat; width: 120px; height: 20px; position: relative;}
li a { display: block; position: absolute; top 0; height: 20px; left: 0;
li:first-child a { width: 20px; z-index: 5;}
li + li a { width: 40px; z-index: 4;}
li + li + li a { width: 60px; z-index: 3;}
li + li + li + li a { width: 80px; z-index: 2;}
li + li + li + li + li a { width: 100px; z-index: 1;}
li + a:hover {background: url(yellow_stars.png) no-repeat;}
ul li span { display: none;}

如何运作

基本上你的星星创造了重叠的矩形形状。第一颗恒星包括具有最高z指数的20x20盒 - >使它成为第一颗恒星，并成为所有恒星之上。第二颗恒星是一个由第一颗恒星和第二颗恒星组成的矩形。它的z-index使它成为第一颗恒星，但就像第一颗恒星一样，它将与连续的恒星重叠。 - ＆GT;对所有5颗星重复此操作，以便每颗恒星都有一个20x20区域，在任何给定时间都可以“悬浮”。因为如果你徘徊星星4，那么每个星锚实际上是从左侧的“全长” - >所有80px都被激活，你会看到4颗金色的星星。但是当你去明星3时，只有3星被激活 - ＆gt; 3星出现了。

希望能够解释它。我把一个快速的小伙伴扔在一起，我希望能帮到你。我使用了简单的颜色，但你看到1-5个“黄色”盒子在悬停时变色。

模仿：使用css类悬停css

3 个答案:

废料方法和实施金字塔绝对定位

如何运作