五星好评鼠标悬浮实现效果

标记使用unicode实体作为其中的星号（☆）。 如果你有一个UTF-8字符集应该没什么大不了的。 或者您可以使用您可以使用任意数量的星星：

 

☆☆☆☆☆

现在我们需要在悬停时使用“solid”的恒星翻转那个“hollow”的星星（图库用于查找那些类型的字符）。 很容易，只需在它上面放一个solid星（★）的伪元素：hover

以下是全部的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;
}

 

用例