使用CSS实现星级评价效果

原文：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;
}

         Demo查看

         Dabblet编辑地址

         实际的用处：

                   实际中，JavaScript在评论星级的时候必被包含的。当用户点击星星后，星星等级将通过Ajax方式传输，并在窗口永久性的显示评论的等级。若Javascript已经被包含，通过给星星添加触发器来实现不是很好嘛？若你的应用，已经绝对依赖于Javascript，那么这是肯定的。若你想不用Javascript建站，那么此篇功能将是你需要的。你可以查看  LeaVerou's example ，如何使用表单中的单选按钮来传递评价等级。