使鼠标移入行星星变亮<style type="text/css"> .star { font-size: 24px; color: #999; transition: color 0.3s; margin-right: 4px; } </style> </head> <body> <div id="stars"> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> </div> <script type="text/javascript"> $(function() { $('#stars').on('mousemove', function(e) { var width = $(this).width(); var mouseX = e.pageX - $(this).offset().left; var starIndex = Math.ceil(mouseX / (width / 5)); $(this).find('.star:lt(' + starIndex + ')').css('color', '#ffd700'); $(this).find('.star:gt(' + (starIndex - 1) + ')').css('color', '#999'); }).on('mouseout', function() { $(this).find('.star').css('color', '#999'); }); });

时间: 2024-03-26 22:41:35 浏览: 149

要实现鼠标移入星星变亮的效果，可以将代码中的 `mousemove` 事件改为 `mouseenter` 事件。修改后的代码如下所示： HTML 代码： ```html <div id="stars"> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> </div> ``` CSS 代码： ```css .star { font-size: 24px; color: #999; transition: color 0.3s; margin-right: 4px; } ``` jQuery 代码： ```javascript $(function() { $('#stars').on('mouseenter', function() { $(this).find('.star').css('color', '#ffd700'); }).on('mouseleave', function() { $(this).find('.star').css('color', '#999'); }); }); ``` 解释一下代码的实现：首先，我们在 HTML 中创建了一个包含了五个星号的 `<div>` 元素，并使用 CSS 设置了星号的样式。然后，我们使用 jQuery 绑定了 `mouseenter` 事件和 `mouseleave` 事件，用于监听鼠标的移入和移出事件。在 `mouseenter` 事件中，我们将所有星号的颜色设置为亮黄色，达到星星变亮的效果。在 `mouseleave` 事件中，我们将所有星号的颜色重置为默认颜色。这样，当鼠标移出 `<div>` 元素时，所有星号都会变回默认颜色。希望这个示例代码对您有所帮助！

阅读全文

相关推荐

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通