Question

我正在使用Jquery和CSS3的网站上工作。我有图像和悬停我想缩放图像。 Hover适用于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看 - Run jQuery code after AngularJS completes rendering HTML

Answer 2

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>

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

悬停在Image上没有使用Javascript / JQuery

4 个答案: