css如何实现五星好评

在网站设计上，五星评价是比较常见的一种评价方式。下面我们来讲一下如何使用CSS实现五星评价。

首先我们需要一个HTML结构，可以使用ul和li标签模拟五颗星：

ul class="star-rating">
        li class="star">
    a href="#">
    /a>
    /li>
        li class="star">
    a href="#">
    /a>
    /li>
        li class="star">
    a href="#">
    /a>
    /li>
        li class="star">
    a href="#">
    /a>
    /li>
        li class="star">
    a href="#">
    /a>
    /li>
    /ul>

接下来，我们需要用CSS来实现五星评价的样式。我们可以通过给每个星星一个背景色来实现五颗星的效果：

.star-rating {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: inline-block;
        font-size: 0;
}
.star {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin: 0;
        padding: 0;
        background-color: #ddd;
}
.star a {
        display: block;
        width: 100%;
        height: 100%;
}
.star:hover ~ .star a,.star:hover a,.star-checked a {
        background-color: yellow;
}
    

其中，.star:hover ~ .star a和.star:hover a用于实现鼠标悬停时的颜色变化效果，.star-checked a用于实现点击后的颜色变化效果。

最后，我们需要添加一些JavaScript代码来实现五星评价的交互：

var stars = document.querySelectorAll('.star a');
stars.forEach(function(element) {
    element.addEventListener('click', function(event) {
            event.preventDefault();
            var star = event.target.parentNode;
            var stars = Array.prototype.slice.call(star.parentNode.children);
            var index = stars.indexOf(star);
        stars.forEach(function(star, i) {
                star.classList.toggle('star-checked', i = index);
        }
    );
    }
    );
}
    );
    

上面的代码使用querySelectorAll方法获取了所有星星的元素，然后遍历元素，给每个元素添加一个click事件处理函数。在处理函数中，我们可以通过event.target和parentNode获取当前点击的星星的位置，并通过遍历来设置所有前面的星星为选中状态。

这样，我们就实现了五星评价的效果。完整的示例代码可以在下面的CodePen中查看：

https://codepen.io/pen/KKVaoQv

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！