javascript - 当 "unhovering"项时重置类

Question

我获得了第一个星级并正在运行，但是，我缺少一个部分。 我的 HTML 看起来像这样:

<div class="rating">
  <a class="star-link" href="/vote?hack=3&amp;rating=1">
    <span class="glyphicon glyphicon-star-empty star inline star-active" data-hack="3" data-rating="1" id="3-star-1"></span>
  </a>
  <a class="star-link" href="/vote?hack=3&amp;rating=2">
    <span class="glyphicon glyphicon-star-empty star inline star-active" data-hack="3" data-rating="2" id="3-star-2"></span>
  </a>
  <a class="star-link" href="/vote?hack=3&amp;rating=3">
    <span class="glyphicon glyphicon-star-empty star inline star-active" data-hack="3" data-rating="3" id="3-star-3"></span>
  </a>
  <a class="star-link" href="/vote?hack=3&amp;rating=4">
    <span class="glyphicon glyphicon-star-empty star inline star-active" data-hack="3" data-rating="4" id="3-star-4"></span>
  </a>
  <a class="star-link" href="/vote?hack=3&amp;rating=5">
    <span class="glyphicon glyphicon-star-empty star inline" data-hack="3" data-rating="5" id="3-star-5"></span>
  </a>
</div>

这是我的 JavaScript:

javascript:
  $('span.star').hover(function() {
    hack_id = this.dataset.hack;
    rating = this.dataset.rating;

    for (i = 1; i <= 5; i++) {
      if (i <= rating) {
        $('#' + hack_id + '-star-' + i).addClass('star-active');
      } else {
        $('#' + hack_id + '-star-' + i).removeClass('star-active');
      }
    }
  });

现在，当我将鼠标悬停在星星上时，它会很好地应用该类，并且还会删除不需要的星星的类。 我的最后一个问题是，一旦应用了类并且我将鼠标移到其他地方，它就不会撤消更改。 我非常需要某种:

if (not hovering over any star)
   remove all classes set before
endif

我知道这是一项非常基本的任务，但我似乎无法完成它。 提前谢谢大家!

Answer 1

你可以使用jquery的mouseout(): http://api.jquery.com/mouseout/

此外，您可以简单地在 css 中定义，而不是使用 jquery 来应用类

.star-active:hover{
/*whatever you have in .start-active now*/
}

那么你就不需要任何 jquery/js 了