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
– Pranav C Balan, Commented Nov 14, 2015 at 7:11
Put the img into a div and declare a transition to its class. — damiano celent
– damiano celent, Commented Nov 14, 2015 at 8:31

Vel · Accepted Answer · 2015-11-14 07:15:17Z

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>

Azad · Accepted Answer · 2015-11-14 07:15:32Z

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, 2015 at 7:15

Azad

5,2725 gold badges31 silver badges59 bronze badges

1 Comment

virendrao Over a year ago

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

Community · Accepted Answer · 2017-05-23 11:44:33Z

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, 2017 at 11:44

CommunityBot

11 silver badge

answered Nov 14, 2015 at 7:12

Jeff K

5432 silver badges12 bronze badges

4 Comments

virendrao Over a year ago

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

Jeff K Over a year ago

@virendrao Make sure you don't have multiple images all with the same ID. Does my Fiddle work for you?

virendrao Over a year ago

it works but when use in my script doesnt work though works through css

Jeff K Over a year ago

@virendrao your issue is due to Angular, see this post for a fix stackoverflow.com/questions/16935766/…

Shameem Ahmed Mulla · Accepted Answer · 2015-11-14 07:34:26Z

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

Collectives™ on Stack Overflow

Hover on Image not working Javascript / JQuery

4 Answers 4

Comments

1 Comment

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

4 Comments

Comments

Linked

Related