当前位置：首页 > news >正文

前端如何实现一个五星评价，鼠标滑动，前边星星颜色的变黄，后边的不变；

news 来源：原创 2025/5/22 9:59:19

直接上代码

<!DOCTYPE html>
<html>
<head>
<style>
.star-rating {
  display: flex;
  padding: 10px 0;
}

.star {
  position: relative;
  width: 40px;
  height: 40px;
}

.half {
  position: absolute;
  top: 0;
  width: 20px;
  height: 40px;
  overflow: hidden;
  font-size: 40px;
  color: #e0e0e0;
  cursor: pointer;
  transition: color 0.2s;
}

.half.left {
  left: 0;
}

.half.right {
  right: 0;
}

.half.left::before,
.half.right::before {
  position: absolute;
  content: '★';
  width: 40px;
}

.half.left::before {
  left: 0;
}

.half.right::before {
  right: 0;
}
</style>
</head>
<body>
<div class="star-rating">
  <div class="star">
    <span class="half left" data-score="0.5"></span>
    <span class="half right" data-score="1.0"></span>
  </div>
  <div class="star">
    <span class="half left" data-score="1.5"></span>
    <span class="half right" data-score="2.0"></span>
  </div>
  <div class="star">
    <span class="half left" data-score="2.5"></span>
    <span class="half right" data-score="3.0"></span>
  </div>
  <div class="star">
    <span class="half left" data-score="3.5"></span>
    <span class="half right" data-score="4.0"></span>
  </div>
  <div class="star">
    <span class="half left" data-score="4.5"></span>
    <span class="half right" data-score="5.0"></span>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const starRating = document.querySelector('.star-rating');
  const halves = document.querySelectorAll('.half');

  starRating.addEventListener('mousemove', (e) => {
    const target = e.target.closest('.half');
    if (!target) return;
    
    const score = parseFloat(target.dataset.score);
    halves.forEach(half => {
      const halfScore = parseFloat(half.dataset.score);
      half.style.color = halfScore <= score ? '#ffd700' : '#e0e0e0';
    });
  });

  starRating.addEventListener('mouseleave', () => {
    halves.forEach(half => {
      half.style.color = '#e0e0e0';
    });
  });
});
</script>
</body>
</html>

效果：