将鼠标悬停在图像上不起作用

Question

我正在使用Jquery和CSS3的网站上工作。 我有图像，悬停时我要缩放图像。 悬停可与CSS一起使用，但我希望它通过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');
                });    
            });

请帮助为什么悬停无法正常工作。

Answer 1

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

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

更新OP的问题是由于Angular see-在AngularJS完成呈现HTML之后运行jQuery代码

Answer 2

小提琴

    <!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>

Answer 3

从事件处理程序中删除“ img”，对我有用

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

Answer 4

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

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