Jquery Hover条件在鼠标外出时滞后

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.

我试图用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>");

});

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.

请帮助或建议任何其他更简单的方法。提前致谢。

3 个解决方案

#1

You should use mousemove to change the image depending on event.pageY and mouseleave to set default image i.e rate0

您应该使用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

#2

Try to use mouseenter and mouseleave instead of hover:

尝试使用mouseenter和mouseleave而不是悬停:

$( "#rate" )
  .mouseenter(function(e) {

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

#3

You can try to use mouseenter and mouseleave like in the example

您可以尝试使用示例中的mouseenter和mouseleave

https://jsfiddle.net/8d7s6fxj/1/

#1