JQuery rating system problem

Hi I'm trying to implement a JQuery star rating script into my site, taken from reading this tutorial http://webtint.net/tutorials/5-star-rating-system-in-php-mysql-and-jquery/, the number of rates and current rating is stored in mysql. But the problem I'm having is when someone just hovers over the stars and moves the mouse out, it doesn't go back to what the current vote was, it remains where it was last hovered over.

Heres what I have

HTML / PHP


<?php
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("test") or die(mysql_error());

$query = mysql_query("SELECT * FROM ratings");

while($row = mysql_fetch_array($query)) {
$rating = (int)$row[rating];
?>
<div class="floatleft">
<div id="rating_<?php echo $row[id]; ?>">
<span class="star_1"><img src="images/star_blank.png" alt="" <?php if($rating > 0) { echo"class='hover'"; } ?> /></span>
<span class="star_2"><img src="images/star_blank.png" alt="" <?php if($rating > 1.5) { echo"class='hover'"; } ?> /></span>
<span class="star_3"><img src="images/star_blank.png" alt="" <?php if($rating > 2.5) { echo"class='hover'"; } ?> /></span>
<span class="star_4"><img src="images/star_blank.png" alt="" <?php if($rating > 3.5) { echo"class='hover'"; } ?> /></span>
<span class="star_5"><img src="images/star_blank.png" alt="" <?php if($rating > 4.5) { echo"class='hover'"; } ?> /></span>
</div>
</div>
<div class="star_rating">
(Rated <strong><?php echo $rating; ?></strong> Stars)
</div>

<div class="clearleft">&nbsp;</div>
<?php
}
?>


JavaScript:


$(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 > 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('send.php', {rating: current_star, id: rid});
});
});

You have no "hover out" function declared inside your call to .hover(), so nothing is going to happen when your mouse exits hover.