5

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

现在我想要一个“模仿” :hover 行为的类，我调用了它，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 来显示星星

4

3 回答 3

2

试试这个（我把颜色移到: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;
}
于 2013-08-01T16:29:39.950 回答
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;
}
于 2013-08-01T16:33:56.970 回答
0

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

JSFIDDLE---> 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-index 的 20x20 框组成 -> 使其成为第一颗星并位于所有星星之上。第二颗星是由第一颗星+第二颗星组成的矩形。它的 z-index 使它低于第一颗星，但就像第一颗星一样，它将被连续的星重叠。-> 对所有 5 颗星重复此操作，这样每颗星都有一个 20x20 的区域，在任何给定时间都可以“悬停”。由于每个星锚实际上是左侧的“全长”，如果您悬停星 4 -> 所有 80px 已激活，您会看到 4 个金色星。但是当你去星 3 时，只有星 3 被激活-> 3 星出现。

希望能解释一下。我整理了一个快速的jsfiddle，希望对您有所帮助。我使用了纯色，但是当您悬停时，您会看到 1-5 个“黄色”框颜色变亮。

于 2013-08-01T16:55:39.710 回答