В чем проблема в коде jquery?

Question

[Kaunov_ivan]

HTML:

<div class="center sheet">
      <a href="" class="img"><img src="img/sheet.png"></a>
</div>

JS:

$(".sheet").on('mouseover', '.img', function(){
         $('.img').html('<img src="img/sheet2.png">');
         console.log('over');
     });
     $(".sheet").on('mouseout', '.img', function(){
         $('.img').html('<img src="img/sheet.png">');
         console.log('out');
     })

При наведении по надцать раз появляется картинка вторая, но первая возвращаться не хочет.

Answer 1

[Andrew]

$('.sheet').hover(function() {
      $('.img img', this).attr("src", "img/img/sheet2.png");
  }, function() {
    $('.img img', this).attr("src", "img/img/sheet.png");
  });

Answer 2

[Денис Инешин]

Не так! А вот так:

$(".sheet").on('mouseover', '.img', function(){
    $(this).find('img').prop('src', 'img/sheet2.png'); // <- меняем содержимое src
    console.log('over');
});
$(".sheet").on('mouseout', '.img', function(){
    $(this).find('img').prop('src', 'img/sheet.png'); // <- меняем содержимое src
    console.log('out');
});

Answer 3

[Сергей Сергей]

Тут лучше менять свойство картинки, а не содержимое ссылки.
$('.img img').attr('src','img/sheet123.png');

Answer 4

[Иван Соболев]

mouseenter/mouseleave

$(".sheet").on('mouseenter', '.img', function(){
  $('img', this).attr("src", "img/img/sheet2.png");
}).on('mouseleave', '.img', function(){
  $('img', this).attr("src", "img/img/sheet.png");
})

Answer 5

[kn1ght_t]

проще через css сделать, не?
sheet:hover и менять бэкграунд