Jquery Hover Condition Lagging on mouse out

I m trying to build a simple star rating system with jquery. Everything works fine but sometimes on mouse out the image is not changed.

//My Script

$("#rate").hover(function(e){
//On Mouse In
$(this).mousemove(function( event ) {   

var pageCords = event.pageX;

if(pageCords<42){
    $("#rate").html("<img src=include/images/rate1.png>");
}
else if(pageCords>42 && pageCords<56){
    $("#rate").html("<img src=include/images/rate2.png>");
}
else if(pageCords>57 && pageCords<79){
    $("#rate").html("<img src=include/images/rate3.png>");
}
else if(pageCords>57 && pageCords<79){
    $("#rate").html("<img src=include/images/rate3.png>");
}
else if(pageCords>87 && pageCords<103){
    $("#rate").html("<img src=include/images/rate4.png>");
}
else if(pageCords>103 && pageCords<125){
    $("#rate").html("<img src=include/images/rate5.png>");
}

});
},
//on Mouse Out
function(){ 
    $("#rate").html("<img src=include/images/rate0.png>");

 });    

I tried using a flag but was unsuccessful.

<!--My Html-->
<p>
<span>Move the mouse over the div.</span>
<span>
</span>
</p>
<div id="rate">
<img src="include/images/rate0.png">
</div>

Please help with this or suggest any other simpler way. Thanks in advance.