Hover over particular div element?

Alrighty so I'm trying to add a 1-5 star rating system directly into my table. So far I have it displaying the 5 stars as follows:

<div id="ratings_1" class="ratings">
    <div class="star_1 ratings_stars ratings_blank"></div>
    <div class="star_2 ratings_stars ratings_blank"></div>
    <div class="star_3 ratings_stars ratings_blank"></div>
    <div class="star_4 ratings_stars ratings_blank"></div>
    <div class="star_5 ratings_stars ratings_blank"></div>
</div>

The ratings_stars style looks like this:

.ratings_stars {
    background: url('star_blank.png') no-repeat;
    float: left;
    height: 28px;
    padding: 2px;
    width: 32px;
}

Finally the original code for hovering and clicking on these elements is this:

 $(document).ready(function() {
 $('.ratings_stars').hover(

            // Handles the mouseover

            function() {

                $(this).prevAll().andSelf().addClass('ratings_over');
               

            },

            // Handles the mouseout

            function() {

                $(this).prevAll().andSelf().removeClass('ratings_over');

            }

        );
//send ajax request to rate.php
        $('.ratings_stars').bind('click', function() {
			
			var id=$(this).parent().attr("id");
		    var num=$(this).attr("class");
			var poststr="id="+id+"&stars="+num;
		$.ajax({url:"rate.php",cache:0,data:poststr,success:function(result){
   document.getElementById(id).innerHTML=result;}
   });	
		});

 
        });

So how would I go about converting that code into something that lets the hover/click functions work inside datatables?