前端如何实现一个五星评价，鼠标滑动，前边星星颜色的变黄，后边的不变；
- 软件开发
- 2025-09-04 08:12:01
直接上代码
<!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>效果：
前端如何实现一个五星评价，鼠标滑动，前边星星颜色的变黄，后边的不变；由讯客互联软件开发栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“前端如何实现一个五星评价，鼠标滑动，前边星星颜色的变黄，后边的不变；”
