css 五颗星展示评价
时间: 2023-05-19 22:02:11 浏览: 80
五颗星评价
可以使用伪元素来实现五颗星的展示评价,具体代码如下:
HTML代码:
```
<div class="star-rating">
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
</div>
```
CSS代码:
```
.star-rating {
font-size: 0;
}
.star {
display: inline-block;
width: 20px;
height: 20px;
background-image: url(star.png);
background-size: contain;
}
.star:before {
content: "\2605";
font-size: 20px;
color: #ccc;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.star:hover:before,
.star:hover ~ .star:before {
color: #ffcc00;
}
```
其中,star.png 是五颗星的图片,可以根据实际情况进行替换。此外,通过伪元素的方式,可以实现鼠标悬停时的星星变色效果。
阅读全文