のdivホバー上の変更画像のURLの代わりに画像

Question

ホバー私は、マウスオーバーで画像のURLを変更しようとしているその作業罰金が、私がしようとしています何をしていますが、divの代わりに画像の上に置いて、画像のURLを変更

次jQueryは私が持っている：

$(".logo > img").on({ 
    "mouseover" : function() { 
    this.src = 'images/logo-white.png'; 
    }, 
    "mouseout" : function() { 
    this.src='images/logo-black.png'; 
} 

HTML私はdivのホバーにそれを作るにはどうすればよい

<div class="logo"> 
    <img src="images/logo-white.png"> 
</div> 

？助けてください！

Answer 1

これはHTML

<div class="logo"> 
    <img src="images/logo-white.png"> 
</div> 

である場合、これは動作します：

$(".logo").on({ 
    "mouseover": function() { 
    $(this).find("img").attr("src", "images/logo-white.png"); 
    }, 
    "mouseout": function() { 
    $(this).find("img").attr("src", "images/logo-black.png"); 
    } 
}); 

オルタナティブ：.hover - }

$(".logo").hover(
    function() {$(this).find("img").attr("src", "images/logo-white.png");}, 
    function() {$(this).find("img").attr("src", "images/logo-black.png");} 
); 

Answer 2

$(".logo").on({ 
    "mouseover" : function() { 
    $(".logo img").attr("src","images/logo-white.png"); 
    }, 
    "mouseout" : function() { 
    $(".logo img").attr("src","images/logo-white.png"); 
} 

Answer 3

これを試してみてください以下を使用しています

$('.logo').hover(function() { 
      $(this).find('img').attr('src','images/logo-white.png'); 
      }, 
        function() { 
       $(this).find('img').attr('src','images/logo-black.png'); 
      } 
     ); 

https://jsfiddle.net/nkugogop/2/