使用CSS类来模拟:hover CSS效果

Question

我有一系列的div用于创建一个“星级评分”输入框。通常情况下，星星是灰色的。当鼠标悬停在其中一个星星上时，星星填充了一种颜色，这个功能是正常的。

现在我想要一个class来“模拟”：hover行为，并将其命名为active，所以当我给它添加这个class时，星星会填充颜色，但这并不起作用。

以下是代码：

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;
}

这里是fiddle链接：http://jsfiddle.net/fuTfX/ 我正在使用FontAwesome来展示星星。

- Mangiucugna

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;
}

- kalley

Answer 2

您忘记在.active规则中添加:before。请修改。

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

To

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

- potench

Answer 3

实现金字塔绝对定位的抓取方法

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;}

工作原理

基本上，您的星星创建了重叠的矩形形状。第一颗星星由一个20x20的框组成，具有最高的z-index -> 使其成为第一个星星并在所有星星的顶部。第二个星星是一个矩形，包括第一个星星和第二个星星。它的z-index使它在第一个星星下面，但像第一个星星一样，它将被后续的星星覆盖。->对于所有5颗星星都重复这个过程，以便每颗星星都有一个20x20的区域，在任何给定时间都可以“悬停”。由于每个星锚实际上是从左侧开始的“完整长度”，如果您悬停在星星4上，则会激活所有80px，并且您会看到4个金色星星。但是当您转到星星3时，只有星星3激活->出现3颗星星。

希望这可以解释清楚。我制作了一个快速jsfiddle，希望能帮助您。我使用纯颜色，但您可以看到1-5个“黄色”框在悬停时变色。

- ProfileTwist