jQuery Javascript ratings: Making the rating reappear when user takes their cursor off

Question

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?

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

    });




});

EDIT: Outputted HTML for something with a 3-star rating:

<div id="rating_3">
            <span class="star_1"><img src="http://localhost:8888/fivestars/star_blank.png" alt="" class="hover" /></span>
            <span class="star_2"><img src="http://localhost:8888/fivestars/star_blank.png" alt="" class="hover" /></span>
            <span class="star_3"><img src="http://localhost:8888/fivestars/star_blank.png" alt="" class="hover" /></span>
            <span class="star_4"><img src="http://localhost:8888/fivestars/star_blank.png" alt=""  /></span>
            <span class="star_5"><img src="http://localhost:8888/fivestars/star_blank.png" alt=""  /></span>
        </div>

Answer 1

The hover event works as follow in Jquery:

$("[id^=rating_]").hover(function() {
//IN
},
function() {
 //OUT
 //Your code when the cursor is out here.
});

From your code, I can conclude that your Out code will probably look like this :

$("id^=rating_").children("[class^=star_]").children('img').removeClass("hover");

Answer 2

UPDATE:

The selected rating is stored in the ratings_x element's data(), and is retrieved when you leave the ratings area.

    $('[class^=star_]').mouseenter(
        function() {
            if($(this).parent().data('selected') == undefined) {
                var selectedStar = $(this).parent().find('.hover').length - 1;
                $(this).parent().data('selected', selectedStar)
            }
            $(this).children().addClass('hover');
            $(this).prevAll().children().addClass('hover');
            $(this).nextAll().children().removeClass('hover');
        });

    $('[id^=rating_]').mouseleave(
        function() {
            var selectedIndex = $(this).data('selected')
            var $selected = $(this).find('img').eq(selectedIndex).addClass('hover').parent();
            $selected.prevAll().children().addClass('hover');
            $selected.nextAll().children().removeClass('hover');
    });

---

The proper usage of hover() is with two functions:

$('#myElement').hover(
    function() {
        // mouseenter code
    },
    function() {
        // mouseleave code
    }
);

Use the second function to set the proper view when the mouse leaves the element.