前端JS特效第29波：jQuery鼠标经过星星显示特效

以下是实现鼠标悬停在星星上时显示提示信息的简单示例代码：

HTML部分：

<div class="rating">
  <span class="star">★</span>
  <span class="star">★</span>
  <span class="star">★</span>
  <span class="star">★</span>
  <span class="star">★</span>
</div>
<div class="tooltip">提示信息</div>

CSS部分：

.rating {
  position: relative;
}
 
.tooltip {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px;
  border-radius: 4px;
  background-color: #f9f9f9;
  color: #000;
  font-size: 12px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
 
.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #f9f9f9 transparent;
}

jQuery部分：

$(document).ready(function() {
  $('.star').hover(function() {
    var rating = $(this).index() + 1;
    $('.tooltip').text('您的评分：' + rating).css({
      visibility: 'visible',
      opacity: 1
    });
  }, function() {
    $('.tooltip').css({
      visibility: 'hidden',
      opacity: 0
    });
  });
});

确保在你的HTML文件中引入了jQuery库，并且在你的HTML文件中引入了上述CSS和jQuery代码。这个例子中，鼠标悬停在星星上时，会显示一个提示框，提示用户的评分等级。