做五个空五角星鼠标移入星星变亮

好的，您可以使用以下 HTML、CSS 和 JavaScript 代码来实现这个效果：

HTML 代码：

<div class="star-rating">
  <span class="star" data-rating="1"></span>
  <span class="star" data-rating="2"></span>
  <span class="star" data-rating="3"></span>
  <span class="star" data-rating="4"></span>
  <span class="star" data-rating="5"></span>
</div>

CSS 代码：

.star-rating {
  font-size: 0;
}

.star {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url('path/to/empty-star.png');
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
}

.star.active {
  background-image: url('path/to/filled-star.png');
}

JavaScript 代码：

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

stars.forEach(function(star) {
  star.addEventListener('mouseover', setStarRating);
});

function setStarRating(event) {
  const rating = event.target.getAttribute('data-rating');

  for (let i = 0; i < stars.length; i++) {
    if (i < rating) {
      stars[i].classList.add('active');
    } else {
      stars[i].classList.remove('active');
    }
  }
}

这段代码中，我们使用了五个 `span` 元素来表示五个空五角星。当鼠标移入到其中一个星星时，我们通过 JavaScript 代码来为这个星星和之前的所有星星添加 `active` 类名，从而将它们的背景图案更改为亮五角星。同时，我们也将鼠标移出星星区域时，所有星星的样式都会变为初始状态。