遇到一種情況，就是運用hover事件的時候，會出現對象（主要是圖片）閃動現象。主要是由於hover事件重復觸發導致這一現象。

html:

<p class="smallImg" style="width:500px">
    <img class="eckPcImg" src="/{$theme_cur.thumb}" width="278" height="220" >
    <img class="eckMobileImg" src="/{$theme_cur.thumb_mobile}" width="150" height="220" style="margin-left:20px;" class="tempImages">
 

 </p>

<p class="smallImg" style="width:500px">
    <img src="/{$v.thumb}" width="280" height="220" class="tempImages">
    <img src="/{$v.thumb_mobile}" width="150" height="220" class="tempImages" style="margin-left:20px;">
</p>

js:

<script >
 $(function(){
 var isBigImgDiv=false;
 

  var BigImgDiv=‘<div id="btnBigImg" style="z-index:9999;position:fixed;top:50%;left:50%;margin-left:-350px;margin-top:-200px;box-shadow:0 10px 10px #ddd"><img src="" class="tempImages"></div>‘
      $(".smallImg>img").mouseenter(function(){
          if(isBigImgDiv)
          {
             return;
 

           }
           var imgSrc= $(this).attr("src");

          // console.log(imgSrc);
         $(document.body).append(BigImgDiv);
         $("#btnBigImg img").attr("src",imgSrc);
         $("#btnBigImg img").attr("width",$(this).attr("width")*2);
          $("#btnBigImg img").attr("height",$(this).attr("height")*2);
        isBigImgDiv=true;

       });


     var el = window.document.body;//聲明一個變量，默認值為body
     window.document.body.onmouseover = function(event){
       el = event.target;//鼠標每經過一個元素，就把該元素賦值給變量el
      // console.log("class:",$(event.target).attr("class"),"isBigImgDiv:",isBigImgDiv);
       if(($(event.target).attr("class")!="tempImages"&&$(event.target).attr("class")!="eckPcImg"&&$(event.target).attr("class")!="eckMobileImg")&&isBigImgDiv){
       isBigImgDiv=false;
        $("#btnBigImg").remove();
       }
     }



 })

 </script>

44.JS--hover事件防重復效果