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

良心有约

于 2019-07-24 16:59:25 发布

阅读量378

点赞数

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

<div class="rating">
<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
</div>

现在我们需要在悬停时使用“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;
}