0

I have been trying to change image on hover. But it is some how not working

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
  $(".card .image-container").mouseover(function () {
  $(this).attr('src', $(this).data("hover"));
}).mouseout(function () {
  $(this).attr('src', $(this).data("src"));
});
)};
</script>
<div class="card col-xs-2" style="margin-top:33%;padding:0 2% 2% 2%">
  <img 
   src="img/2013-1.png" 
   data-src="img/2013-1.png" 
   data-hover="img/2013-2.png" 
   class="image-container" 
   alt="" 
   style="max-width: 100%;max-height: 100%;width: 100%;height: 100%"
   />
marionebl
  • 3,342
  • 20
  • 34
pawan shaw
  • 3
  • 1
  • 1
    can you also post the rest of your relevant js code? – messerbill Jan 19 '18 at 13:14
  • Possible duplicate of https://stackoverflow.com/questions/47182389/change-image-on-hover-with-inline-code – Fourat Jan 19 '18 at 13:24
  • Possible duplicate of [change image on hover with inline code](https://stackoverflow.com/questions/47182389/change-image-on-hover-with-inline-code) – creyD Jan 19 '18 at 13:46

5 Answers5

0

There is no need for mouseover you can use hover. Like this:

$(function() {
    $(".card img").hover(function(){
      var hoverImg = $(this).data("hover");
      $(this).attr('src', hoverImg);
      }, function(){
      $(this).attr('src', $(this).data("mysrc"));
  });   
});  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card col-xs-2" style="margin-top:15%;padding:0 2% 2% 2%">
  <img src="https://placebear.com/300/300" data-mysrc="https://placebear.com/300/300" data-hover="http://via.placeholder.com/350x150" class="image-container" alt="" style="max-width: 100%;max-height: 100%;width: 100%;height: 100%"/>
</div>
Zvezdas1989
  • 1,445
  • 2
  • 16
  • 34
0

It is typo have a look at the closing of your code. It should be }) instead of )}

Manishh
  • 1,444
  • 13
  • 23
0

Separate class names with comma. In jquery multi selector you need to use comma between classes names.

$(".card, .image-container")

Kunal Pal
  • 545
  • 8
  • 21
0

try this

I used two google images here, you can replace it with your own

$(document).ready(function() {
  $(".card .image-container").mouseover(function() {
    $(this).data('src', $(this).prop("src")).attr('src', $(this).data("hover"));
  }).mouseout(function() {
    $(this).attr('src', $(this).data("src"));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card col-xs-2" style="margin-top:33%;padding:0 2% 2% 2%">
  <img src="http://1.bp.blogspot.com/-5bPNsF5plzw/VnJWs-7RbrI/AAAAAAAARmA/DaZmn8YUjAk/s1600-r/logo_research_at_google_color_1x_web_512dp.png" data-hover="https://pbs.twimg.com/profile_images/839721704163155970/LI_TRk1z_400x400.jpg" class="image-container"
    alt="" />
</div>
Aswin Ramesh
  • 1,654
  • 1
  • 13
  • 13
0

Just a little mix-up while closing off your function. Hence the syntax error.

Here's the correct code.

<script type="text/javascript">
    $(document).ready(function() {
        $(".card .image-container").mouseover(function () {
            $(this).attr('src', $(this).data("hover"));
        }).mouseout(function () {
            $(this).attr('src', $(this).data("src"));
        });
    });
</script>
crazychukz
  • 676
  • 1
  • 4
  • 10