原文:http://css-tricks.com/star-ratings/
星标记是经典的UX模式之一。我有个想法,通过不使用Javascript来实现该功能。
标记符使用的是Unicode编码的星型号 (☆)。若你使用的是UTF-8字符集,也可以。当然,你也可以使用☆。你可以如此布置更多的星星:
<divclass="rating">
<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
</div>
接下来,需要实现实心的星星符号(可在此图像集查看到一些字符)。非常简单,只是实现实心星星元素的:hover伪类方法。
.rating > span:hover:before {
content: "\2605";
position: absolute;
}
使用绝对位置放置后,很方便的实现了再浏览器中top:0;left:0;形式的放置。到此,实体星星直接放置在了空心星星的上方。你可以自定义的更改大小以及颜色。
但是当前只实现了单个星星的变换。但UX模式要求所有的星星都需要被填充。例如:若鼠标滑过第四个星星,那么前四个星星都将被变换。
在CSS中,无法选择先前的子元素。然而,有一种方式可以选择后续的元素,即通过同胞选择器。如果我们倒序排列这些字符,那么我们能够使用同胞选择器来获取悬浮星星之前的所有星星,但是必须在悬浮星星的之后操作。
.rating {
unicode-bidi: bidi-override;
direction: rtl;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
content: "\2605";
position: absolute;
}
到此,此功能就完成了。我们只使用了简单的CSS代码就实现此功能,恭喜一下吧。完整代码如下:
.rating {
unicode-bidi: bidi-override;
direction: rtl;
}
.rating > span {
display: inline-block;
position: relative;
width: 1.1em;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
content: "\2605";
position: absolute;
}
实际的用处:
实际中,JavaScript在评论星级的时候必被包含的。当用户点击星星后,星星等级将通过Ajax方式传输,并在窗口永久性的显示评论的等级。若Javascript已经被包含,通过给星星添加触发器来实现不是很好嘛?若你的应用,已经绝对依赖于Javascript,那么这是肯定的。若你想不用Javascript建站,那么此篇功能将是你需要的。你可以查看 LeaVerou's example ,如何使用表单中的单选按钮来传递评价等级。