评级星CSS (悬停位置更改)

<div class="rating-stars">
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
</div>

.rating-stars {
  display: inline-block;
  font-size: 0;
  cursor: pointer;
}

.star {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(star-empty.png); /* 星星的背景图片 */
  background-size: cover;
}

.star:hover,
.star:hover ~ .star {
  background-image: url(star-filled.png); /* 鼠标悬停时星星的背景图片 */
}

const stars = document.querySelectorAll('.star');

stars.forEach((star, index) => {
  star.addEventListener('click', () => {
    // 更新星星的状态，例如改变星星的颜色或添加填充效果
    for (let i = 0; i <= index; i++) {
      stars[i].classList.add('filled');
    }
  });
});