Hover on Image not working Javascript / JQuery

Question

I am working on website which uses Jquery and CSS3. I have image and on hover i want to scale image. Hover works with CSS but i want it to via JQuery following code i have tried till now. Please help.

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

I also tried hover() method instead of mouseenter and mouseleave in above script code

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

Please help why hover not working.

`,'img');` to `);` in first method and not `$(document).load(` it's `$(document).ready(` in second method — Pranav C Balan, Nov 14 '15 at 07:11
Put the img into a div and declare a transition to its class. — damiano celent, Nov 14 '15 at 08:31

score 0 · Answer 1 · edited May 23 '17 at 11:44

0

I've created a fiddle that works using code pretty similar to your second solution (use document.ready and no need for the removeClass function). https://jsfiddle.net/L5bj38me/

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

Update OP's issue is due to Angular see - Run jQuery code after AngularJS completes rendering HTML

edited May 23 '17 at 11:44

Community

1
1

answered Nov 14 '15 at 07:12

Jeff K

543
2
12

i tried same code but dont know why its not working when i put i css using :hover selector it works. My images gets rendered using angular js framework – virendrao Nov 14 '15 at 07:17
@virendrao Make sure you don't have multiple images all with the same ID. Does my Fiddle work for you? – Jeff K Nov 14 '15 at 07:23
it works but when use in my script doesnt work though works through css – virendrao Nov 14 '15 at 07:27
@virendrao your issue is due to Angular, see this post for a fix http://stackoverflow.com/questions/16935766/run-jquery-code-after-angularjs-completes-rendering-html – Jeff K Nov 14 '15 at 07:28

score 0 · Answer 2 · answered Nov 14 '15 at 07:15

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>

score 0 · Answer 3 · answered Nov 14 '15 at 07:15

0

Remove 'img' from event handler, Its work for me

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

answered Nov 14 '15 at 07:15

Azad

5,144
4
28
56

i tried same code but dont know why its not working when i put i css using :hover selector it works. My images gets rendered using angular js framework – virendrao Nov 14 '15 at 07:18

Shameem Ahmed Mulla · Answer 4 · 2015-11-14T07:34:26.797

There are many ways to do it, one solution is -

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

Here's another one -

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

Few more -

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

Same output but with different approach -

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

Hover on Image not working Javascript / JQuery

4 Answers4