Javascript 如何在mousemove上应用按比例的类更改？

我有一个具有以下html的五星评级系统：

<div class="rate-small rate0"></div>

---

注意：这段代码运行得很好，但现在当我在console.log上记录y坐标时，我在Chrome、FF和IE上大约偏离了两到三百。所以，我是一个坐标不正确的人，或者有一种更好的方法可以做到这一点，而不必在分区中指定如此严格的数字。

我建议使用10张带有半颗星的单独图像。然后一切都可以通过4行CSS实现

HTML:

---

对于每个评级，将其拆分为透明分区。更少的代码。

确实，更改css和html是一种方法，但我正在尝试使用提供给我们的css和html，这些css和html在网站上的多个位置都在使用。我不想在不需要的情况下重做任何事情，但我意识到这是一种选择。

var rate={
    start: function(){

       $('body').on('mousemove','div.rate-small',function(e){
       var x = e.pageX - this.offsetLeft;
       var y = e.pageY - this.offsetTop;
       //console.log(y);
        if(x>'534' && x<'662'){
            rate.makeBold();
            if(x>'540' && x<'550'){
             $(this).attr('class','rate-small rate5')   
            }
            else if(x>'550' && x<'560'){
             $(this).attr('class','rate-small rate10')  
            }
            else if(x>'560' && x<'570'){
             $(this).attr('class','rate-small rate15')  
            }
            else if(x>'570' && x<'580'){
             $(this).attr('class','rate-small rate20')  
            }
            else if(x>'580' && x<'590'){
             $(this).attr('class','rate-small rate25')  
            }
            else if(x>'590' && x<'600'){
             $(this).attr('class','rate-small rate30')  
            }
            else if(x>'600' && x<'610'){
             $(this).attr('class','rate-small rate35')  
            }
            else if(x>'610' && x<'620'){
             $(this).attr('class','rate-small rate40')  
            }
            else if(x>'620' && x<'630'){
             $(this).attr('class','rate-small rate45')  
            }
            else if(x>'630' && x<'660'){
             $(this).attr('class','rate-small rate50')  
            }
          }
       }).on('mouseleave','div.rate-small', function(){
             $(this).attr('class','rate-small rate0');
             rate.removeBold(); 

       }).on('click','div.rate-small', function(){
           var rateId = ($(this).attr('id'));
           var rateClass = ($(this).attr('class'));
           var rateNum = rateClass.replace(/[^0-9]/g, '')
           rate.sendrate(rateId,rateNum)
       })

  },
}

<div class="left_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate( 5);"></div>
<div class="right_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate(10);"></div>
<div class="left_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate(15);"></div>
<div class="right_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate(20);"></div>
<div class="left_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate(25);"></div>
<div class="right_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate(30);"></div>
<div class="left_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate(35);"></div>
<div class="right_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate(40);"></div>
<div class="left_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate(45);"></div>
<div class="right_half"><img src="spacer.gif" width="16px" height="32px" onclick="rate(50);"></div>

.left_half {
 background:url('left_half_empty.png');
}

.left_half:hover {
 background:url('left_half_full.png');
}

.right_half {
 background:url('right_half_empty.png');
}

.right_half:hover {
 background:url('right_half_full.png');
}