悬停在图像不工作Javascript/JQuery

问题描述：

我正在使用jquery和CSS3的网站上工作。我有图像和悬停我想缩放图像。悬停与CSS工作，但我希望它通过JQuery以下代码我已经尝试到现在。请帮忙。悬停在图像不工作Javascript/JQuery

HTML

<!DOCTYPE html> 
<html > 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/app.css" /> 
    </head> 
    <body > 
     <img class="img-responsive" id ="thumbnail" src="my-image-src"> 
     <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> 
     <script> 
     $(document).ready(function(){ 
      $("#thumbnail").on({ 
       mouseenter: function() { 
        $(this).addClass("scaleout"); 
       }, 
       mouseleave:function() { 
        $(this).removeClass("scaleout"); 
       } 
      },'img'); 
     }); 

     </script> 
    </body> 
</html>

CSS

.scaleout { 
    transform: scale(1, 0.80); 
    -ms-transform: scale(1, 0.80); 
    -webkit-transform: scale(1, 0.80); 
}

我还试图hover()法代替mouseenter和mouseleave在上面的脚本代码

$(document).load(function(){ 
       $('#thumbnail').hover(function(){ 
        $(this).toggleClass('scaleout'); 
       }, 
       function(){ 
        $(this).removeClass('scaleout'); 
       });  
      });

请帮助为什么悬停不工作。

' 'img'）;'to'）;'在第一个方法中不是'$（document）.load（'它是'$（docum （第二种方法） –

将img放入div并声明向其类的转换。 –

答

我创建了一个使用与第二个解决方案非常相似的代码的小提琴（使用document.ready并且不需要removeClass函数）。 https://jsfiddle.net/L5bj38me/

<script> 
    $(document).ready(function(){ 
    $('#thumbnail').hover(function(){ 
     $(this).toggleClass('scaleout'); 
    }) 
    }); 
</script>

更新OP的问题是由于角度看 - Run jQuery code after AngularJS completes rendering HTML

我试过相同的代码，但不知道为什么它不工作时，我把我的CSS使用：悬停选择器的作品。我的图像获取呈现使用角度js框架 – virendrao

@virendrao请确保您没有多个图像都具有相同的ID。我的小提琴为你工作吗？ –

它的作品，但在我的脚本中使用时，虽然不工作，虽然通过css工作 – virendrao

答

fiddle

<!DOCTYPE html> 
     <html > 
      <head> 
       <link rel="stylesheet" type="text/css" href="css/app.css" /> 
      </head> 
      <body > 
       <img class="img-responsive" id ="thumbnail" src="my-image-src"> 
       <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> 
       <script> 
       $(document).ready(function(){ 
        $("#thumbnailtest").hover( 
         function() {  
         $(this).addClass("scaleout"); 
         }, function() { 
         $(this).removeClass("scaleout"); 
         } 
        ); 
        }); 

       </script> 
      </body> 
     </html>

答

移除事件处理程序 'IMG'，它的工作对我来说

<script> 
    $(document).ready(function(){ 
     $("#thumbnail").on({ 
      mouseenter: function() { 
       $(this).addClass("scaleout"); 
      }, 
      mouseleave:function() { 
       $(this).removeClass("scaleout"); 
      } 
     }); 
    }); 
</script>

我试过相同的代码，但不知道为什么它不工作时，我把我的CSS使用：悬停选择器它的工作原理。我的图像获取呈现使用角度js框架 – virendrao

其工作对我来说 – azad

我试着直接标记仍然不工作 – virendrao

答

有很多方法可以做到这一点，一个解决方案是 -

$(document).ready(function(){ 
    $('#thumbnail').on('mouseenter', function (e) { 
     $(this).toggleClass('scaleout'); 
    }); 
});

这里是另外一个 -

$("#thumbnail").mouseenter(function (e) { 
     $(this).toggleClass('scaleout'); 
    });

几道 -

$("#thumbnail") 
    .mouseover(function() { 
    $(this).toggleClass('scaleout'); 
    }) 
    .mouseout(function() { 
    $(this).toggleClass('scaleout'); 
    });

的输出结果相同，但不同的方法 -

$("#thumbnail") 
    .mouseenter(function() { 
    $(this).toggleClass('scaleout'); 
    }) 
    .mouseleave(function() { 
    $(this).toggleClass('scaleout'); 
    });

悬停在图像不工作Javascript/JQuery

相关推荐