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

Answer 2

尝试使用mouseenter和mouseleave代替hover：

$( "#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>");
  });

Answer 3

您可以尝试使用示例

中的mouseenter和mouseleave

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

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

3 个答案: