javascript - Jquery 悬停条件鼠标移出时滞后

Question

我正在尝试使用 jquery 构建一个简单的星级评级系统。一切正常，但有时鼠标移开时图像不会改变。

//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>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>");

}); 

我尝试使用标志但没有成功。

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

请帮忙解决这个问题或建议任何其他更简单的方法。 提前致谢。

Answer 1

您应该使用mousemove根据 event.pageY 更改图像和mouseleave设置默认图像，即 rate0

//On Mouse In
  $("#rate").mousemove(function( event ) { 
     var pageCords = event.pageX;
      //alert(event.pageX + ", " + event.pageY);
    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
$("#rate").mouseleave(function(){ 
    $("#rate").html("<img src=include/images/rate0.png>");

});   

<强> DEMO