title: jQuery Javascript ratings: Making the rating reappear when user takes their cursor off
body: <p>I have this jQuery code that handles hovering over rating stars, when you hover they glow as they're meant to. Problem is, once you've taken your cursor out, it still displays what your cursor was on (and doesn't show the original rating). How can I make it check for when the cursor is removed, then show the original ratings?</p>
  
  <pre><code>$(document).ready(function() {
  
  
      $("[id^=rating_]").hover(function() {
  
  
          rid = $(this).attr("id").split("_")[1];
          $("#rating_"+rid).children("[class^=star_]").children('img').hover(function() {
  
              $("#rating_"+rid).children("[class^=star_]").children('img').removeClass("hover");
  
              /* The hovered item number */
              var hovered = $(this).parent().attr("class").split("_")[1];
  
              while(hovered &gt; 0) {
                  $("#rating_"+rid).children(".star_"+hovered).children('img').addClass("hover");
                  hovered--;
              }
  
          });
      });
  
      $("[id^=rating_]").children("[class^=star_]").click(function() {
  
          var current_star = $(this).attr("class").split("_")[1];
          var rid = $(this).parent().attr("id").split("_")[1];
  
          $('#rating_'+rid).load('http://localhost:8888/fivestars/send.php', {rating: current_star, id: rid});
  
      });
  
  
  
  
  });
  </code></pre>
  
  <p>EDIT: Outputted HTML for something with a 3-star rating:</p>
  
  <pre><code>&lt;div id="rating_3"&gt;
              &lt;span class="star_1"&gt;&lt;img src="http://localhost:8888/fivestars/star_blank.png" alt="" class="hover" /&gt;&lt;/span&gt;
              &lt;span class="star_2"&gt;&lt;img src="http://localhost:8888/fivestars/star_blank.png" alt="" class="hover" /&gt;&lt;/span&gt;
              &lt;span class="star_3"&gt;&lt;img src="http://localhost:8888/fivestars/star_blank.png" alt="" class="hover" /&gt;&lt;/span&gt;
              &lt;span class="star_4"&gt;&lt;img src="http://localhost:8888/fivestars/star_blank.png" alt=""  /&gt;&lt;/span&gt;
              &lt;span class="star_5"&gt;&lt;img src="http://localhost:8888/fivestars/star_blank.png" alt=""  /&gt;&lt;/span&gt;
          &lt;/div&gt;
  </code></pre>